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 để 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 trực tiếp trong các dự án của mình dưới dạng 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 để 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ỳ thuộc vào 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 dòng lệnh mà bạn muốn, sao chép kho lưu trữ bản minh hoạ, sau đó nhập thư mục dự án:

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

Tại thời điểm này, bản minh hoạ sẽ được tích hợp sẵn Baseline, nhưng bạn nên kiểm tra một cam kết để bắt đầu từ đầu:

git checkout d3793f25

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ý phiên bản Node. Nếu đã cài đặt phiên bản Node tương đối gần đây trên toàn cầu, thì có thể 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 đó, hãy chuyển đến http://localhost:8080. Bản minh hoạ là một danh sách các thẻ có thể lọc bằng 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 Baseline.

Khi hoàn tất bản minh hoạ, hãy chuyển đến dòng lệnh và nhấn tổ hợp phím 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 khi bắ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ợ phiên bản trình duyệt tối thiểu. Ví dụ: việc sử dụng truy vấn 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ẽ chỉ định một truy vấn Browserslist phù hợp với các mục tiêu Baseline mà bạn có thể sử dụng trong chuỗi công cụ. Mục tiêu Baseline có thể là một trong những mục tiêu sau:

  • Moving targets (Mục tiêu di chuyển), cập nhật theo thời gian khi các trình duyệt mới được phát hành:
    • Baseline Newly available (Mới có sẵn trong Baseline), phù hợp với các tính năng có khả năng 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 từ hiện tại đến 30 tháng trước.
    • Baseline Widely available (Có sẵn rộng rãi trong Baseline), bao gồm các tính năng có khả năng tương tác đã được triển khai trên bộ trình duyệt cốt lõi trong 30 tháng trở lên.
  • Fixed targets (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 mục tiêu này được biểu thị dưới dạng năm từ năm 2016 đến năm hiện tại.

Để bắt đầu, chúng ta sẽ chọn mục tiêu Baseline Widely available (Có sẵn rộng rãi trong Baseline) cho dự án. Để thực hiện việc này, hãy mở package.json và thêm nội dung sau:

"browserslist": "baseline widely available"

4. Quan sát các thay đổi trong đầu ra mã bằng cách chọn các mục tiêu Baseline khác nhau

Bạn vừa chọn Baseline Widely available (Có sẵn rộng rãi trong Baseline) làm mục tiêu cho dự án minh hoạ. Tiếp theo, bạn sẽ muốn xây dựng dự án:

npm run build

Có rất nhiều đầu ra bổ sung vì tuỳ 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ê của 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 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 đối với các thuộc tính CSS chưa hoàn toàn có khả năng tương tác. Cả core-js và autoprefixer đều bị ảnh hưởng bởi truy vấn Browserslist Baseline đã chọn.

Một điều khác trong đầu ra cần chú ý là cách truy vấn Browserslist cho Baseline Widely available (Có sẵn rộng rãi trong Baseline) được dịch thành truy vấn Browserslist. Trong dự án của bạn, truy vấn đó sẽ có dạng tương tự 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 trong đầ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 Baseline. Giả sử ứng dụng của bạn phải hỗ trợ một tập hợp trình duyệt cũ hơn nhiều do SLA nghiêm ngặt hơn. Nếu trường hợp đó xảy ra với bạn, thì có khả năng 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 như sau:

"browserslist": "baseline 2016"

Thao tác này sẽ chọn Baseline 2016 làm mục tiêu và được dịch thành truy vấn Browerslist. Bạn có thể lưu ý sự 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ê của trình đóng gói:

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ẽ thấy rằng gói JavaScript đã tăng kích thước 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 Baseline 2016. Ngoài ra, hãy lưu ý 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 Baseline Widely available (Có sẵn rộng rãi trong Baseline), các phiên bản trình duyệt này cũ hơn rất nhiều. Cũ đến mức phiên bản Edge đang được nhắm mục tiêu trong trường hợp này là phiên bản trước Chromium.

Các polyfill của do core-js chèn vào cũng sẽ thay đổi, nhiều hơn đáng kể so với khi chọn Baseline Widely available (Có sẵn rộng rãi trong Baseline) 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 Baseline có thể có tác động đáng kể đến cách ứng dụng của bạn được chuyển đổi bởi 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ể mong đợi kết quả khác biệt hơn nhiều, 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 Baseline mà bạn chọn.

5. Nhắm mục tiêu các trình duyệt hạ nguồn

Để xem lại, bộ trình duyệt cốt lõi mà Baseline nhắm mục tiêu 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 mục tiêu 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ụ được lấy từ một trình duyệt trong bộ trình duyệt cốt lõi, thường là Chromium. Các 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ắm mục tiêu các trình duyệt này ngoài những trình duyệt trong bộ trình duyệt cốt lõi bằng cách thêm with downstream vào bất kỳ truy vấn Browserslist Baseline hợp lệ nào:

"browserslist": "baseline widely available with downstream"

Thao tác này sẽ nhắm mục tiêu các trình duyệt hạ nguồn theo mục tiêu Baseline Widely available (Có sẵn rộng rãi trong Baseline). Để xem cách truy vấn này phân giải thành truy vấn Browserslist, hãy xây dựng 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 mục tiêu các trình duyệt hạ nguồn theo năm. Ví dụ:

"browserslist": "baseline 2016 with downstream"

Với cấu hình này, truy vấn Browserslist 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

Các truy vấn Baseline được tích hợp trong Browserslist rất tiện lợi cho các công cụ như trình đóng gói và các phần khác của chuỗi công cụ. Tuy nhiên, các công cụ khác cũng có giá trị, chẳng hạn như trình kiểm tra lỗi đã áp dụng các mục tiêu Baseline như một phần của cấu hình.

Một ví dụ điển hình về hỗ trợ trình tìm lỗi mã nguồn cho Baseline bao gồm ESLint. Đây là một phần của tính năng tìm lỗi mã nguồn CSS, cung cấp quy tắc use-baseline bằng cách sử dụng @eslint/css cho phép bạn nhắm mục tiêu Baseline Newly (Mới có sẵn trong Baseline), Baseline Widely available (Có sẵn rộng rãi trong Baseline) hoặc các năm Baseline. 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 thực hiện tương tự đối với các tính năng HTML trong tệp eslint.config.js của bạn:

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

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

  1. Cả gói tìm lỗi mã nguồn 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 tuỳ chọn cấu hình available: "widely".
  2. Đối với cả hai gói tìm lỗi mã nguồn, cấp độ nhật ký cho các lỗi vi phạm trình tìm lỗi mã nguồn đượ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 bản dựng xảy ra.

Có thể bạn đã thấy đầu ra của trình kiểm tra lỗi khi chạy npm run build trước đây, nhưng để chỉ xem đầu ra của trình kiểm tra lỗi, bạn có thể chạy lệnh sau:

npm run lint

Đầu ra mà 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

Việc sử dụng các truy vấn Baseline do Browserslist cung cấp trong dự án của bạn đòi hỏi bạn phải hiểu rõ về các công cụ xây dựng cơ bản và chính Browserslist, nhưng việc đặt các truy vấn này vào một dự án rất đơn giản. Lợi ích chính của việc sử dụng là bạn không còn cần phải nghĩ về các trình duyệt mà bạn hỗ trợ theo số phiên bản, mà là một mục tiêu Baseline thực hiện công việc nặng nhọc cho bạ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ạ đó.

Hỗ trợ Baseline 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 ở chế độ nền, hiện nhắm mục tiêu các trình duyệt Baseline Widely available (Có sẵn rộng rãi trong Baseline) theo mặc định kể từ phiên bản 7.

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