vue-cli3学习整理----browserslist

Posted 2022-04-07 adhehe

你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 javascript 特性和需要添加的 CSS 浏览器前缀。

Browserslist 

在不同前端工具之间共享目标浏览器和Node.js版本的配置。它用于:

• Autoprefixer
• Babel
• postcss-preset-env
• eslint-plugin-compat
• stylelint-no-unsupported-browser-features
• postcss-normalize
• obsolete-webpack-plugin

所有工具将自动找到目标浏览器，当您添加以下package.json:

"browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]　　

或者使用 .browserslistrc配置文件：

# Browsers that we support

last 1 version
> 1%
maintained node versions
not dead

开发人员在类似于 “last 2 version“ 的查询中将版本列表设置为不需要手动更新版本。Browserslist将使用Can I use 数据查询。

Browserslist将从工具选项、Browserslist配置、.browserslistrc配置、package.josn的Browserslist字段或环境变量中获取查询。

您可以在在线演示中测试Browserslist查询。Browserslist示例显示了每个工具如何使用Browserslist。

目录

1. Tools
2. Best Practices
3. Queries
4. Config File
5. Configuring for Different Environments
6. Custom Usage Data
7. JS API
8. Environment Variables
9. Cache

工具

• browserslist-ga：下载您的网站浏览器统计数据，使用它在 ”> 0.5% in my stats" 查询。
• Browserslist -useragent- RegExp：将Browserslist查询编译为RegExp以测试浏览器用户代理。
• Browserslist -useragent- Ruby：是一个Ruby库，用于通过用户代理字符串检查浏览器以匹配Browserslist。
• Browserslist - BrowserStack：在Browserslist 配置中为所有浏览器运行BrowserStack测试。
• caniuse-api：返回支持某些特定特性的浏览器。
• 在项目目录中运行 “npx browserslist” 以查看项目的目标浏览器。这个CLI工具是内置的，可以在任何带有Autoprefixer的项目中使用。

最佳实践