วิธีใช้ข้อมูลพื้นฐานในโปรเจ็กต์

1. บทนำ

Baseline เป็นโครงการริเริ่มที่ให้ข้อความที่ชัดเจนยิ่งขึ้นเกี่ยวกับฟีเจอร์เว็บที่ทำงานร่วมกันได้และปลอดภัยที่จะใช้ในปัจจุบัน ตอนนี้คุณสามารถใช้ Baseline ในโปรเจ็กต์ได้โดยตรงเป็นการค้นหา Browserslist เพื่อให้ Toolchain เปลี่ยนเอาต์พุตของโค้ดตามเป้าหมาย Baseline ที่คุณเลือก ได้แล้ว ด้วยความก้าวหน้าของเครื่องมือ Baseline

ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้ Baseline ในโปรเจ็กต์ตัวอย่าง และวิธีกำหนดค่าเพื่อเลือกเป้าหมาย Baseline ที่เฉพาะเจาะจง นอกจากนี้ คุณยังจะได้สังเกตว่าเอาต์พุตของเครื่องมือในโปรเจ็กต์เปลี่ยนแปลงไปอย่างไรโดยขึ้นอยู่กับเป้าหมายพื้นฐานที่คุณเลือก

2. ตั้งค่าการสาธิตในเครื่องของคุณ

ก่อนอื่น ให้ไปที่แอปพลิเคชันเทอร์มินัลที่ต้องการ จากนั้นโคลนที่เก็บข้อมูลเดโม แล้วเข้าสู่ไดเรกทอรีโปรเจ็กต์

git clone git@github.com:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack

ในตอนนี้ การสาธิตจะมีการผสานรวม Baseline อยู่แล้ว แต่คุณอาจต้องการตรวจสอบคอมมิตที่เริ่มต้นจากศูนย์

git checkout d3793f25

เมื่อโคลนที่เก็บแล้ว ตอนนี้ก็สามารถเปิดตัวเดโมได้แล้ว โปรเจ็กต์นี้ใช้ nvm เพื่อจัดการการกำหนดเวอร์ชันของ Node หากคุณติดตั้ง Node เวอร์ชันล่าสุดไว้ทั่วโลก คุณอาจไม่จำเป็นต้องทำขั้นตอนนี้ แต่หากใช้ nvm ให้เรียกใช้คำสั่งต่อไปนี้

nvm install
nvm use

จากนั้นติดตั้งแพ็กเกจของโปรเจ็กต์โดยทำดังนี้

npm install

หากต้องการดูการสาธิต ให้เรียกใช้คำสั่งต่อไปนี้

npm start

จากนั้นไปที่ http://localhost:8080 ตัวเดโมเองคือรายการการ์ดที่กรองได้โดยใช้ช่องแบบฟอร์มที่ด้านบนของหน้า ตัวแอปเองใช้ฟีเจอร์ต่างๆ ที่มีคุณสมบัติตรงตามเกณฑ์พื้นฐาน

เมื่อดูการสาธิตเสร็จแล้ว ให้ไปที่เทอร์มินัลแล้วกด Ctrl+C เพื่อหยุดการสาธิตได้ทุกเมื่อ

3. วิธีผสานรวมข้อมูลพื้นฐานเข้ากับโปรเจ็กต์

การสาธิตนี้ไม่ได้ระบุการกำหนดค่า Browserslist ในตอนเริ่มต้น Browserslist เป็นไวยากรณ์การค้นหาแบบย่อที่บอก Toolchain ว่าต้องรองรับเบราว์เซอร์เวอร์ชันขั้นต่ำใด เช่น การใช้การค้นหา last 3 years จะระบุเป้าหมายที่หลากหลาย ในการสาธิตนี้ เราจะระบุการค้นหา Browserslist ที่สอดคล้องกับเป้าหมายพื้นฐานที่คุณใช้ในเครื่องมือได้ เป้าหมายพื้นฐานอาจเป็นค่าใดค่าหนึ่งต่อไปนี้

  • เป้าหมายที่เปลี่ยนแปลง ซึ่งจะอัปเดตเมื่อเวลาผ่านไปเมื่อมีการเปิดตัวเบราว์เซอร์ใหม่
    • พื้นฐานที่เพิ่งพร้อมใช้งาน ซึ่งสอดคล้องกับฟีเจอร์ที่ทำงานร่วมกันได้ซึ่งติดตั้งใช้งานในชุดเบราว์เซอร์หลักได้ทุกเมื่อตั้งแต่ปัจจุบันจนถึง 30 เดือนที่ผ่านมา
    • Baseline Widely available ซึ่งรวมถึงฟีเจอร์ที่ทำงานร่วมกันได้ซึ่งมีการใช้งานในชุดเบราว์เซอร์หลักตั้งแต่ 30 เดือนขึ้นไป
  • เป้าหมายคงที่ซึ่งแสดงถึงเวอร์ชันของเบราว์เซอร์ ณ จุดเวลาที่แน่นอน โดยจะแสดงเป็นปีตั้งแต่ปี 2016 จนถึงปีปัจจุบัน

เราจะเลือกเป้าหมาย "Baseline ที่มีการเปลี่ยนแปลง" ที่พร้อมใช้งานอย่างกว้างขวางสำหรับโปรเจ็กต์นี้ก่อน โดยเปิด package.json แล้วเพิ่มข้อมูลต่อไปนี้

"browserslist": "baseline widely available"

4. สังเกตการเปลี่ยนแปลงในเอาต์พุตโค้ดโดยเลือกเป้าหมายพื้นฐานที่แตกต่างกัน

คุณเพิ่งเลือก Baseline Widely available เป็นเป้าหมายสำหรับโปรเจ็กต์เดโม จากนั้นคุณจะต้องสร้างโปรเจ็กต์โดยทำดังนี้

npm run build

มีเอาต์พุตเพิ่มเติมจำนวนมากเนื่องจากมีการระบุตัวเลือก debug สำหรับ @babel/preset-env เป็น true ใน babel.config.js ของโปรเจ็กต์ ก่อนอื่น ให้สังเกตขนาดของ CSS และ JavaScript ในสถิติของ Bundler

assets by status 213 KiB [emitted]
  asset js/home.5f3c5480.js 208 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.20db50ef.css 3.64 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

โปรดทราบว่าที่นี่ JavaScript Bundle มีขนาด 208 KiB และ CSS มีขนาด 3.64 KiB เนื่องจากโปรเจ็กต์นี้ใช้ core-js สำหรับ JavaScript Polyfill และ autoprefixer เพื่อใช้คำนำหน้าเฉพาะของผู้ให้บริการสำหรับพร็อพเพอร์ตี้ CSS ที่ยังทำงานร่วมกันได้อย่างไม่สมบูรณ์ ทั้ง core-js และ autoprefixer ได้รับผลกระทบจากการค้นหา Browserslist พื้นฐานที่เลือก

อีกสิ่งหนึ่งในเอาต์พุตที่ควรให้ความสนใจคือวิธีที่คำค้นหา Browserslist สำหรับฟีเจอร์พื้นฐานที่พร้อมใช้งานในวงกว้างจะได้รับการแปลเป็นคำค้นหา Browserslist ในโปรเจ็กต์ของคุณ โค้ดจะมีลักษณะคล้ายกับโค้ดต่อไปนี้

Using targets: {
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "safari": "16"
}

โปรดทราบว่า core-js จะแทรก Polyfill ในเอาต์พุตการบิลด์

The corejs3 polyfill added the following polyfills:
  es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }

เอาต์พุตนี้อาจเปลี่ยนแปลงหากคุณเปลี่ยนเป้าหมายพื้นฐาน สมมติว่าแอปพลิเคชันของคุณต้องรองรับเบราว์เซอร์รุ่นเก่ากว่ามากเนื่องจาก SLA ที่เข้มงวดกว่า หากคุณเป็นเช่นนั้น คุณก็อาจเลือกเป้าหมายที่ระมัดระวังมากขึ้น ในไฟล์ package.json ให้เปลี่ยนการกำหนดค่า Browserslist เพื่อให้ตรงกับรายการต่อไปนี้

"browserslist": "baseline 2016"

ซึ่งจะเลือก Baseline 2016 เป็นเป้าหมาย และจะแปลเป็นคำค้นหา Browerslist คุณจะเห็นความแตกต่างในเอาต์พุตของเครื่องมือหลังจากเรียกใช้บิลด์อีกครั้ง

npm run build

ก่อนอื่น ให้สังเกตการเปลี่ยนแปลงขนาดไฟล์ของ JavaScript และ CSS ของโปรเจ็กต์ในสถิติ Bundler

assets by status 237 KiB [emitted]
  asset js/home.b228612d.js 232 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.0c3e4fd7.css 3.91 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

คุณจะเห็นว่ากลุ่ม JavaScript มีขนาดเพิ่มขึ้นเกือบ 30 KiB CSS ของโปรเจ็กต์มีขนาดใหญ่ขึ้นเล็กน้อยเท่านั้น เนื่องจาก autoprefixer เพิ่มคำนำหน้าของผู้ขายมากขึ้นตามเป้าหมายพื้นฐานปี 2016 นอกจากนี้ โปรดสังเกตการเปลี่ยนแปลงในคําค้นหา Browserslist ด้วย

Using targets: {
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "safari": "10"
}

เบราว์เซอร์เวอร์ชันเหล่านี้เก่ากว่าเป้าหมายพื้นฐานที่พร้อมให้บริการอย่างกว้างขวางมากพอสมควร ซึ่งในกรณีนี้ Edge เวอร์ชันที่กำหนดเป้าหมายเป็นเวอร์ชันก่อน Chromium

Polyfill ที่ core-js แทรกก็จะเปลี่ยนแปลงด้วย ซึ่งมากกว่าเมื่อเลือก Baseline Widely available เป็นเป้าหมายอย่างมาก

The corejs3 polyfill added the following polyfills:
  es.array.filter { "edge":"14" }
  es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.object.to-string { "edge":"14", "firefox":"49" }
  es.array.includes { "firefox":"49" }
  es.string.includes { "edge":"14" }
  es.array.map { "firefox":"49" }
  es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.symbol { "edge":"14", "firefox":"49" }
  es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
  web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.to-string { "edge":"14" }
  es.array.from { "edge":"14", "firefox":"49" }
  es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.test { "edge":"14" }
  es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }

ประเด็นสำคัญที่นี่คือเป้าหมายพื้นฐานอาจส่งผลอย่างมากต่อวิธีที่เครื่องมือในโปรเจ็กต์ของคุณจะเปลี่ยนแอปพลิเคชัน ตัวอย่างนี้เป็นแอปพลิเคชันพื้นฐานมาก โดยไม่มีฟีเจอร์ประสบการณ์การใช้งานสำหรับนักพัฒนาซอฟต์แวร์ที่ล้ำสมัยมากนักใน React หรือในแอปพลิเคชันเอง สำหรับแอปพลิเคชันที่ซับซ้อนกว่านี้มาก คุณอาจคาดหวังผลลัพธ์ที่แตกต่างกันมาก ซึ่งอาจรวมถึงการเพิ่ม Polyfill, การแปลง และแหล่งที่มาอื่นๆ ของโค้ดเพิ่มเติมเพื่อให้เป็นไปตามเป้าหมายพื้นฐานที่คุณเลือก

5. การกำหนดเป้าหมายเบราว์เซอร์ปลายทาง

เพื่อเป็นการทบทวน ชุดเบราว์เซอร์หลักที่ Baseline กำหนดเป้าหมายประกอบด้วยเบราว์เซอร์ต่อไปนี้

  • Chrome
  • Chrome บน Android
  • Firefox
  • Firefox บน Android
  • Edge
  • Safari ใน macOS
  • Safari ใน iOS

อย่างไรก็ตาม คุณสามารถกำหนดเป้าหมายสิ่งที่เรียกว่า "เบราว์เซอร์ดาวน์สตรีม" ได้ เบราว์เซอร์เหล่านี้คือเบราว์เซอร์ที่มีเครื่องมือที่ได้มาจากเบราว์เซอร์ในชุดเบราว์เซอร์หลัก ซึ่งส่วนใหญ่มักจะเป็น Chromium ซึ่งรวมถึงเบราว์เซอร์ต่างๆ เช่น Opera, Samsung Internet และอื่นๆ คุณกำหนดเป้าหมายเบราว์เซอร์เหล่านี้ได้นอกเหนือจากเบราว์เซอร์ในชุดเบราว์เซอร์หลักโดยเพิ่ม with downstream ลงในคำค้นหา Browserslist ที่ถูกต้อง

"browserslist": "baseline widely available with downstream"

ซึ่งจะกำหนดเป้าหมายเบราว์เซอร์ดาวน์สตรีมตามเป้าหมายพื้นฐานที่พร้อมใช้งานอย่างกว้างขวาง หากต้องการดูว่าการกำหนดค่านี้จะเปลี่ยนเป็นคำค้นหา Browserslist ได้อย่างไร ให้สร้างโปรเจ็กต์ใหม่โดยทำดังนี้

npm start

จากนั้นให้สังเกตการเปลี่ยนแปลงในคําค้นหา Browserslist ดังนี้

Using targets: {
  "android": "108",
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "opera": "94",
  "opera_mobile": "80",
  "safari": "16",
  "samsung": "21"
}

นอกจากนี้ คุณยังกำหนดเป้าหมายเบราว์เซอร์ปลายทางตามปีได้ด้วย เช่น

"browserslist": "baseline 2016 with downstream"

เมื่อใช้การกำหนดค่านี้ คำค้นหา Browserslist จะเปลี่ยนไปตามนั้น

Using targets: {
  "android": "53",
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "opera": "40",
  "opera_mobile": "80",
  "safari": "10",
  "samsung": "6.2"
}

6. Linters และเครื่องมืออื่นๆ

คำค้นหาพื้นฐานที่สร้างขึ้นใน Browserslist นั้นสะดวกสำหรับเครื่องมือต่างๆ เช่น Bundler และส่วนอื่นๆ ของ Toolchain แต่ก็มีประโยชน์ในเครื่องมืออื่นๆ เช่น Linter ซึ่งใช้เป้าหมายพื้นฐานเป็นส่วนหนึ่งของการกำหนดค่าด้วย

ตัวอย่างที่ดีของการรองรับ Linter สำหรับ Baseline ได้แก่ ESLint ซึ่งเป็นส่วนหนึ่งของการตรวจสอบ CSS ที่มีuse-baseline กฎที่ใช้ @eslint/css ที่ช่วยให้คุณกำหนดเป้าหมายเป็น Baseline Newly, Baseline Widely available หรือ Baseline years ได้ นอกจากนี้ยังมีกฎที่คล้ายกันในแพ็กเกจชุมชน @html-eslint/eslint-plugin ที่ช่วยให้คุณทำเช่นเดียวกันกับฟีเจอร์ HTML ในไฟล์ eslint.config.js ได้

export default [
  /* Omitted JS linting rules ... */
  // Lint CSS files for Baseline:
  {
    files: ["**/*.css"],
    plugins: {
      css
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to make sure they are using
      // only Baseline Widely available features:
      "css/use-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
  // Lint HTML and JSX files for Baseline:
  {
    files: ["**/*.html"],
    ...html.configs["flat/recommended"],
    rules: {
      // Lint HTML files to make sure they are using
      // only Baseline Widely available features:
      "@html-eslint/use-baseline": ["warn", {
        available: "widely"
      }]
    }
  }
];

ข้อควรทราบในการกำหนดค่านี้มีดังนี้

  1. ทั้งแพ็กเกจการตรวจสอบ HTML และ CSS ใช้use-baseline rule และตั้งค่าเป็น Widely available โดยใช้ตัวเลือกการกำหนดค่า available: "widely"
  2. สำหรับแพ็กเกจการตรวจสอบทั้ง 2 รายการ ระบบจะตั้งค่าระดับบันทึกสำหรับการละเมิดของ Linter เป็น "warn" ตั้งค่าเป็น "error" เพื่อหยุดทำงานพร้อมรหัสข้อผิดพลาดเพื่อป้องกันไม่ให้เกิดการสร้าง

คุณอาจเคยเห็นเอาต์พุตของ Linter เมื่อเรียกใช้ npm run build มาก่อน แต่หากต้องการดูเอาต์พุตของ Linter เพียงอย่างเดียว ให้เรียกใช้คำสั่งต่อไปนี้

npm run lint

เอาต์พุตที่คุณเห็นจะไฮไลต์คำเตือนหลายรายการใน CSS ของโปรเจ็กต์

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/normalize.css
  222:3  warning  Property 'outline' is not a widely available baseline feature  css/use-baseline

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/styles.css
  62:3   warning  Property 'outline' is not a widely available baseline feature                                css/use-baseline
  81:23  warning  Value 'subgrid' of property 'grid-template-rows' is not a widely available baseline feature  css/use-baseline

7. สรุป

การใช้การค้นหาพื้นฐานที่ Browserslist จัดไว้ให้ในโปรเจ็กต์ต้องมีความเข้าใจเครื่องมือบิลด์พื้นฐานและ Browserslist เอง แต่การวางไว้ในโปรเจ็กต์นั้นทำได้ง่ายๆ ประโยชน์หลักของการใช้ Baseline คือคุณไม่ต้องกังวลเรื่องเบราว์เซอร์ที่รองรับในแง่ของหมายเลขเวอร์ชันอีกต่อไป แต่ให้โฟกัสที่เป้าหมาย Baseline ซึ่งจะช่วยคุณจัดการเรื่องที่ซับซ้อน

นอกจากนี้ ยังมีเวอร์ชันของเดโมนี้ที่ทำงานบน Rollup และคุณสามารถทำตาม Codelab นี้ได้โดยใช้เดโมดังกล่าวด้วย

นอกจากนี้ การรองรับพื้นฐานยังเริ่มปรากฏในเครื่องมือการจัดกลุ่มอื่นๆ ด้วย เช่น Vite ซึ่งใช้ Rollup เบื้องหลังตอนนี้กำหนดเป้าหมายเป็นเบราว์เซอร์ที่รองรับ Baseline อย่างกว้างขวางโดยค่าเริ่มต้นตั้งแต่เวอร์ชัน 7

ไม่ว่าคุณจะเลือกใช้วิธีใด การนำการค้นหาพื้นฐานที่มีอยู่ใน Browserslist มาใช้ในโปรเจ็กต์ และเลือกเป้าหมายพื้นฐานที่เหมาะกับคุณจะช่วยให้คุณกำหนดเป้าหมายเบราว์เซอร์ได้ง่ายขึ้นและเชื่อถือได้มากขึ้น