Ngày phát hành: 7 tháng 5 năm 2025
Browserslist là một trong những công cụ phổ biến nhất để định cấu hình các phiên bản trình duyệt được hỗ trợ tối thiểu trong cơ sở mã giao diện người dùng. Nhà phát triển thêm truy vấn browserslist vào tệp package.json và Browserslist sẽ hiển thị danh sách các trình duyệt được hỗ trợ tối thiểu. Bạn có thể sử dụng Browserslist với nhiều công cụ tìm lỗi mã nguồn, polyfill và đóng gói phổ biến, bao gồm:
- Autoprefixer
- Babel sử dụng
@babel/preset-env - PostCSS sử dụng
postcss-preset-env - ESLint sử dụng
eslint-plugin-compat - Stylelint sử dụng
stylelint-no-unsupported-browser-features - webpack
Mục tiêu cơ sở
Khi quyết định sử dụng Đường cơ sở, bạn nên xem xét cơ sở người dùng của mình và quyết định nhóm tính năng cơ sở nào mà bạn muốn nhắm đến:
- Baseline Widely available (Cơ sở được cung cấp rộng rãi) bao gồm tất cả các tính năng web được trình duyệt cốt lõi Baseline hỗ trợ đầy đủ từ 30 tháng trước.
- Các nhóm tính năng theo năm cơ sở, ví dụ: Cơ sở 2020, bao gồm tất cả các tính năng Mới có vào cuối năm được chỉ định.
Tuỳ thuộc vào cơ sở người dùng, bạn có thể nhắm đến Đường cơ sở có sẵn rộng rãi hoặc bạn có thể cần nhắm đến một năm Đường cơ sở cũ hơn. Tham khảo công cụ phân tích hoặc RUM để biết người dùng của bạn đang sử dụng phiên bản trình duyệt nào.
Cài đặt browserslist-config-baseline
Sau khi quyết định nhóm tính năng Cơ sở nào bạn muốn nhắm đến, bạn có thể áp dụng mục tiêu đó cho các công cụ dành cho nhà phát triển. Cách đơn giản nhất để thực hiện việc này cho mọi công cụ sử dụng danh sách trình duyệt là cài đặt browserslist-config-baseline:
# npm npm i browserslist-config-baseline@latest -D # yarn yarn add --latest browserslist-config-baseline -D # bun bun add browserslist-config-baseline@latest -d Cách nhắm mục tiêu theo tiêu chí Cơ sở được cung cấp rộng rãi
Để nhắm mục tiêu Đường cơ sở có sẵn rộng rãi, hãy cập nhật hoặc thêm cấu hình browserlist trong package.json bằng từ khoá extends:
{ ... "browserslist": [ "extends browserslist-config-baseline" ] ... } Khi browserslist tải danh sách trình duyệt được hỗ trợ, browserslist-config-baseline sẽ tự động tạo các phiên bản trình duyệt tối thiểu hiện tại hỗ trợ tất cả các tính năng hiện có trên diện rộng. Bạn cũng có thể thêm extends browserslist-config-baseline vào tệp .browserslistrc và tệp này sẽ được xử lý theo cách tương tự.
Cách nhắm đến các năm cơ sở
Nếu bạn muốn nhắm đến một nhóm tính năng Năm cơ sở, hãy thêm / và năm ở định dạng YYYY vào cuối truy vấn browserslist:
"browserslist": "extends browserslist-config-baseline/2020" Cách chỉ định trình duyệt hạ nguồn
Bộ trình duyệt cốt lõi cơ sở bao gồm Chrome, Edge, Firefox và Safari. Các trình duyệt khác dựa trên cùng một mã nguồn mở như Chrome và Edge – Chromium – và sẽ hỗ trợ cùng một bộ tính năng như bất kỳ phiên bản Chromium nào mà chúng triển khai.
browserslist-config-baseline sử dụng baseline-browser-mapping để liên kết các phiên bản trình duyệt với các bộ tính năng mà trình duyệt đó hỗ trợ. Các mối liên kết cho trình duyệt UC Browser dành cho thiết bị di động và trình duyệt QQ Browser dành cho thiết bị di động có trong baseline-browser-mapping và các trình duyệt khác có thể được đưa vào trong tương lai.
Để đưa các trình duyệt này vào cấu hình Cơ sở, hãy thêm /with-downstream ngay sau tên mô-đun trong cấu hình browserslist:
"browserslist": "extends browserslist-config-baseline/with-downstream" hoặc:
"browserslist": "extends browserslist-config-baseline/with-downstream/2020" Ví dụ về cách hoạt động của browserslist-config-baseline
Trong công cụ đóng gói
Việc thêm browserslist-config-baseline vào kho lưu trữ có thể có hiệu quả ngay lập tức. Babel là một công cụ xây dựng phổ biến để đóng gói JavaScript. Nếu bạn sử dụng các tuỳ chọn mặc định của gói @babel/preset-env, nhiều API và phương thức JavaScript hiện đại sẽ được thay thế bằng cú pháp chi tiết hơn mà các trình duyệt cũ yêu cầu:
Tuy nhiên, việc đặt browserslist-config-baseline để nhắm đến Đường cơ sở 2020 trên cùng một dự án mẫu sẽ làm giảm đáng kể kích thước đầu ra của Javascript này, vì cần ít phép biến đổi cú pháp hơn:
Hãy tự thử nghiệm bằng cách sử dụng mã ví dụ trong kho lưu trữ baseline-demos của Google Chrome Labs.
Trong trình tìm lỗi mã nguồn
Một số trình tìm lỗi mã nguồn đã hoạt động với Browserslist hoặc có thể được thiết lập để hoạt động với Browserslist bằng cách sử dụng mô-đun tương thích. Ví dụ: stylelint có thể sử dụng cấu hình browserslist bằng mô-đun stylelint-browser-compat. Đặt tệp stylelint.config.js để sử dụng browserslist-config-baseline:
module.exports = { plugins: ['stylelint-browser-compat'], rules: { 'plugin/browser-compat': [ true, { browserslist: ['extends browserslist-config-baseline'], }, ], }, }; Stylelint hiện sẽ gắn cờ CSS không thuộc Baseline Widely available:
Stylelint cũng cung cấp một trình bổ trợ cho phép bạn trực tiếp thiết lập các quy tắc Cơ sở, nhưng nếu bạn đang sử dụng browserslist để xử lý cấu hình, thì browserslist-config-baseline là một giải pháp thay thế.
Cách đóng góp cho browserslist-config-baseline
Nếu bạn muốn gửi yêu cầu về tính năng cho browserslist-config-baseline, hãy tạo vấn đề hoặc yêu cầu kéo trên kho lưu trữ GitHub.
Nếu bạn muốn đóng góp thêm dữ liệu trình duyệt hạ nguồn hoặc báo cáo vấn đề về dữ liệu, hãy tạo vấn đề hoặc yêu cầu kéo trong kho lưu trữ baseline-browser-mapping.