Cách sử dụng Baseline trong dự án

1. Giới thiệu

Baseline là một sáng kiến cung cấp thông tin rõ ràng hơn về những tính năng web có khả năng tương tác và an toàn khi sử dụng hiện nay. Nhờ những tiến bộ trong công cụ Baseline, giờ đây, bạn có thể sử dụng Baseline ngay trong các dự án của mình dưới dạng một truy vấn Browserslist để chuỗi công cụ có thể thay đổi đầu ra của mã dựa trên mục tiêu Baseline mà bạn chọn.

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng Baseline trong một dự án mẫu và cách định cấu hình Baseline để chọn một mục tiêu Baseline cụ thể. Bạn cũng sẽ quan sát được cách đầu ra của chuỗi công cụ dự án thay đổi tuỳ theo mục tiêu Baseline mà bạn đã chọn.

2. Thiết lập bản minh hoạ trên máy cục bộ

Trước tiên, hãy chuyển đến ứng dụng thiết bị đầu cuối mà bạn muốn, sao chép kho lưu trữ bản minh hoạ rồi nhập thư mục dự án:

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

Đến đây, bản minh hoạ sẽ tích hợp sẵn Baseline, nhưng bạn nên kiểm tra một cam kết giúp bạn bắt đầu từ đầu:

git checkout 94f12e34

Sau khi sao chép kho lưu trữ, bạn có thể chạy bản minh hoạ. Dự án này sử dụng nvm để quản lý việc tạo phiên bản Node. Nếu đã cài đặt một phiên bản Node tương đối mới trên toàn cầu, thì có lẽ bạn không cần hoàn tất bước này. Tuy nhiên, nếu bạn sử dụng nvm, hãy chạy các lệnh sau:

nvm install
nvm use

Từ đây, hãy cài đặt các gói của dự án:

npm install

Nếu bạn muốn xem bản minh hoạ, hãy chạy lệnh sau:

npm start

Sau đó, chuyển đến http://localhost:8080. Bản minh hoạ này là một danh sách thẻ có thể lọc bằng cách sử dụng một trường biểu mẫu ở đầu trang. Bản thân ứng dụng sử dụng kết hợp các tính năng đã đạt đến ngưỡng Cơ sở.

Khi bạn hoàn tất bản minh hoạ, hãy chuyển đến thiết bị đầu cuối và nhấn Ctrl+C để dừng chạy bản minh hoạ bất cứ lúc nào.

3. Cách tích hợp Baseline vào dự án

Bản minh hoạ này không chỉ định cấu hình Browserslist ngay từ đầu. Browserslist là một cú pháp truy vấn nhỏ gọn cho biết các chuỗi công cụ phải hỗ trợ những phiên bản trình duyệt tối thiểu nào. Ví dụ: sử dụng một cụm từ tìm kiếm last 3 years sẽ chỉ định một phạm vi rộng các mục tiêu. Trong bản minh hoạ này, chúng ta sẽ sử dụng một gói npm có tên là browserslist-config-baseline để chỉ định một truy vấn Browserslist phù hợp với các mục tiêu Cơ sở mà bạn có thể sử dụng trong chuỗi công cụ của mình.

Để bắt đầu, hãy cài đặt browserslist-config-baseline như sau:

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

Khi được cài đặt, gói này cho phép bạn chỉ định một truy vấn extends Browserslist trong dự án của mình để phân giải thành danh sách các trình duyệt cơ sở. Mục tiêu cơ sở có thể là một trong những mục tiêu sau:

  • Mục tiêu thay đổi, tức là mục tiêu sẽ cập nhật theo thời gian khi các trình duyệt mới được phát hành:
    • Cơ sở mới có sẵn, giúp điều chỉnh các tính năng có thể tương tác được triển khai trên bộ trình duyệt cốt lõi bất cứ lúc nào kể từ hiện tại cho đến 30 tháng trước.
    • Cơ sở được cung cấp rộng rãi, bao gồm các tính năng có thể tương tác đã được triển khai trên bộ trình duyệt cốt lõi cách đây 30 tháng trở lên.
  • Mục tiêu cố định, đại diện cho các phiên bản trình duyệt tại một thời điểm cố định. Các năm này được biểu thị từ năm 2016 đến năm hiện tại.

Để bắt đầu, chúng ta sẽ dùng browserslist-config-baseline để chọn mục tiêu Baseline Widely available (Được cung cấp rộng rãi) đang di chuyển cho dự án. Để thực hiện việc này, hãy mở package.json rồi thêm nội dung sau:

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

4. Quan sát những thay đổi trong đầu ra của mã bằng cách chọn các mục tiêu Cơ sở khác nhau

Bạn vừa chọn Baseline Widely available (Được cung cấp rộng rãi) làm mục tiêu cho dự án minh hoạ. Tiếp theo, bạn sẽ muốn tạo dự án:

npm run build

Có rất nhiều đầu ra bổ sung vì lựa chọn debug cho @babel/preset-env được chỉ định là true trong babel.config.js của dự án. Trước tiên, hãy lưu ý kích thước của CSS và JavaScript trong số liệu thống kê về trình đóng gói:

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]

Xin lưu ý rằng gói JavaScript ở đây là 208 KiB và CSS là 3, 64 KiB. Vì dự án này sử dụng core-js cho các polyfill JavaScript và autoprefixer để áp dụng các tiền tố dành riêng cho nhà cung cấp cho những thuộc tính CSS chưa hoàn toàn tương tác được. Cả core-js và autoprefixer đều chịu ảnh hưởng của browserslist-config-baseline.

Một điều khác cần chú ý trong đầu ra là cách truy vấn Browserslist cho Baseline Widely available được chuyển đổi thành truy vấn Browserslist. Trong dự án của bạn, nội dung này sẽ có dạng như sau:

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

Lưu ý các polyfill do core-js chèn vào đầu ra bản dựng:

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" }

Đầu ra này có thể thay đổi nếu bạn thay đổi mục tiêu Cơ bản. Giả sử ứng dụng của bạn phải hỗ trợ một nhóm trình duyệt cũ hơn nhiều do SLA nghiêm ngặt hơn. Nếu đó là trường hợp của bạn, thì có thể bạn sẽ chọn một mục tiêu thận trọng hơn. Trong tệp package.json, hãy thay đổi cấu hình Browserslist để phản ánh nội dung sau:

"browserslist": "extends browserslist-config-baseline/2016"

Thao tác này sẽ chọn Baseline 2016 làm mục tiêu và được dịch thành một truy vấn Browerslist. Bạn có thể lưu ý những điểm khác biệt trong đầu ra của chuỗi công cụ sau khi chạy lại bản dựng:

npm run build

Trước tiên, hãy lưu ý sự thay đổi về kích thước tệp cho JavaScript và CSS của dự án trong số liệu thống kê về trình kết hợp:

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]

Bạn sẽ nhận thấy rằng kích thước của gói JavaScript đã tăng thêm gần 30 KiB. CSS của dự án chỉ lớn hơn một chút, do autoprefixer thêm nhiều tiền tố của nhà cung cấp hơn dựa trên mục tiêu Đường cơ sở năm 2016. Ngoài ra, hãy lưu ý đến sự thay đổi trong truy vấn Browserslist:

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

So với mục tiêu Cơ sở có sẵn rộng rãi, các phiên bản trình duyệt này cũ hơn rất nhiều – đủ cũ để phiên bản Edge được nhắm đến trong trường hợp này là phiên bản trước Chromium.

Các polyfill được core-js chèn vào cũng sẽ thay đổi, nhiều hơn đáng kể so với khi bạn chọn Baseline Widely available (Đường cơ sở có sẵn trên diện rộng) làm mục tiêu:

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" }

Điểm mấu chốt ở đây là mục tiêu Cơ sở có thể ảnh hưởng đáng kể đến cách ứng dụng của bạn được chuyển đổi bằng chuỗi công cụ của dự án; Ứng dụng trong ví dụ này rất cơ bản, không có nhiều tính năng trải nghiệm nhà phát triển tiên tiến trong React hoặc chính ứng dụng. Đối với các ứng dụng phức tạp hơn đáng kể, bạn có thể dự kiến sẽ có nhiều kết quả khác nhau, thậm chí có thể có nhiều polyfill, biến đổi và các nguồn mã bổ sung khác để tuân thủ mục tiêu Cơ sở mà bạn chọn.

5. Nhắm đến các trình duyệt hạ nguồn bằng browserslist-config-baseline

Để xem xét, bộ trình duyệt cốt lõi mà Baseline nhắm đến bao gồm các trình duyệt sau:

  • Chrome
  • Chrome trên Android
  • Firefox
  • Firefox trên Android
  • Edge
  • Safari trên macOS
  • Safari trên iOS

Tuy nhiên, bạn có thể nhắm đến những trình duyệt được gọi là "trình duyệt hạ nguồn". Đây là những trình duyệt có công cụ bắt nguồn từ một trình duyệt trong bộ trình duyệt cốt lõi (thường là Chromium). Những trình duyệt này bao gồm Opera, Samsung Internet và các trình duyệt khác. Bạn có thể định cấu hình browserslist-config-baseline để nhắm đến chúng trong tệp package.json như sau:

"browserslist": "extends browserslist-config-baseline/with-downstream"

Điều này nhắm đến các trình duyệt hạ nguồn theo mục tiêu Cơ sở có sẵn rộng rãi. Để xem cách này phân giải thành một truy vấn Browserslist, hãy tạo lại dự án:

npm start

Sau đó, hãy lưu ý sự thay đổi trong truy vấn Browserslist:

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

Bạn cũng có thể nhắm đến các trình duyệt cũ hơn theo năm. Ví dụ:

"browserslist": "extends browserslist-config-baseline/with-downstream/2016"

Với cấu hình này, truy vấn Browserslist của bạn sẽ thay đổi cho phù hợp:

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

6. Trình kiểm tra lỗi và các công cụ khác

browserslist-config-baseline là một công cụ thuận tiện cho các trình đóng gói và những phần khác trong chuỗi công cụ của bạn, nhưng các công cụ khác cũng có giá trị, chẳng hạn như các trình kiểm tra cú pháp đã áp dụng các mục tiêu Cơ sở làm một phần trong cấu hình của chúng.

Một ví dụ điển hình về sự hỗ trợ của linter cho Baseline là ESLint. Trong quá trình linting CSS, ESLint cung cấp một quy tắc use-baseline bằng cách sử dụng @eslint/css cho phép bạn nhắm đến Baseline Newly, Baseline Widely available hoặc Baseline years. Ngoài ra, còn có một quy tắc tương tự trong gói @html-eslint/eslint-plugin của cộng đồng cho phép bạn làm điều tương tự đối với các tính năng HTML trong tệp 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"
      }]
    }
  }
];

Sau đây là một vài điều cần lưu ý trong cấu hình này:

  1. Cả gói linting HTML và CSS đều sử dụng quy tắc use-baseline và được đặt thành Widely available (Có sẵn rộng rãi) bằng cách sử dụng lựa chọn cấu hình available: "widely".
  2. Đối với cả hai gói linting, cấp độ nhật ký cho các lỗi vi phạm của linter được đặt thành "warn". Bạn có thể đặt giá trị này thành "error" để loại bỏ bằng mã lỗi nhằm ngăn quá trình tạo xảy ra.

Có thể bạn đã thấy đầu ra của linter khi chạy npm run build trước đây, nhưng để xem đầu ra của linter riêng, bạn có thể chạy lệnh sau:

npm run lint

Đầu ra bạn sẽ thấy làm nổi bật một số cảnh báo trong CSS của dự án:

/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. Kết thúc

Như bạn thấy, việc sử dụng browserslist-config-baseline trong dự án đòi hỏi bạn phải hiểu biết về các công cụ xây dựng cơ bản và Browserslist. Tuy nhiên, bạn có thể đặt công cụ này vào dự án của mình chỉ với một chút công sức. Lợi ích chính của việc sử dụng tính năng này là bạn không cần phải nghĩ về những trình duyệt mà bạn hỗ trợ theo số phiên bản, mà thay vào đó là một mục tiêu Đường cơ sở sẽ giúp bạn thực hiện những việc khó khăn.

Ngoài ra, còn có một phiên bản của bản minh hoạ này chạy trên Rollup và bạn cũng có thể làm theo Lớp học lập trình này bằng cách sử dụng bản minh hoạ đó.

Tính năng hỗ trợ cơ bản cũng bắt đầu xuất hiện trong các công cụ đóng gói khác. Ví dụ: Vite sử dụng Rollup trong phần nâng cao, hiện nhắm đến các trình duyệt Baseline có sẵn rộng rãi theo mặc định kể từ phiên bản 7.

Tuy nhiên, dù bạn quyết định thực hiện theo cách nào, việc đưa browserslist-config-baseline vào chuỗi công cụ của dự án và chọn một mục tiêu Baseline phù hợp với bạn, bạn có thể nhắm đến các trình duyệt theo cách đơn giản và đáng tin cậy hơn.