หน้านี้ได้รับการแปลโดย Cloud Translation API

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

1. บทนำ

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

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

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

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

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

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

git checkout 94f12e34

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

nvm install
nvm use

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

npm install

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

npm start

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

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

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

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

หากต้องการเริ่มต้นใช้งาน ให้ติดตั้ง browserslist-config-baseline ดังนี้

npm install browserslist-config-baseline --save-dev

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

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

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

"browserslist": "extends browserslist-config-baseline"

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-config-baseline

อีกสิ่งหนึ่งในเอาต์พุตที่ควรให้ความสนใจคือวิธีที่คำค้นหา 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": "extends browserslist-config-baseline/2016"

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

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. การกำหนดเป้าหมายเบราว์เซอร์ดาวน์สตรีมด้วย browserslist-config-baseline

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

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

อย่างไรก็ตาม คุณสามารถกำหนดเป้าหมายสิ่งที่เรียกว่า "เบราว์เซอร์ดาวน์สตรีม" ได้ เบราว์เซอร์เหล่านี้คือเบราว์เซอร์ที่มีเครื่องมือที่ได้มาจากเบราว์เซอร์ในชุดเบราว์เซอร์หลัก ซึ่งส่วนใหญ่มักจะเป็น Chromium ซึ่งรวมถึงเบราว์เซอร์ต่างๆ เช่น Opera, Samsung Internet และอื่นๆ คุณกำหนดค่า browserslist-config-baseline เพื่อกำหนดเป้าหมายในไฟล์ package.json ได้ดังนี้

"browserslist": "extends browserslist-config-baseline/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": "extends browserslist-config-baseline/with-downstream/2016"

เมื่อกำหนดค่าแล้ว คำค้นหา 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-config-baseline เป็นเครื่องมือที่สะดวกสำหรับ 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"
      }]
    }
  }
];

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

ทั้งแพ็กเกจการตรวจสอบ HTML และ CSS ใช้use-baseline rule และตั้งค่าเป็น Widely available โดยใช้ตัวเลือกการกำหนดค่า available: "widely"
สำหรับแพ็กเกจการตรวจสอบทั้ง 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-config-baseline ในโปรเจ็กต์ต้องมีความเข้าใจเครื่องมือบิลด์พื้นฐานและ Browserslist แต่การวางลงในโปรเจ็กต์ควรทำได้โดยใช้ความพยายามเพียงเล็กน้อย ประโยชน์หลักของการใช้ Baseline คือคุณไม่ต้องกังวลเรื่องเบราว์เซอร์ที่รองรับในแง่ของหมายเลขเวอร์ชันอีกต่อไป แต่ให้โฟกัสที่เป้าหมาย Baseline ซึ่งจะช่วยคุณจัดการเรื่องที่ซับซ้อน

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

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

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