Autoprefixer配置详解

说是Autoprefixer介绍，其实是Browserslist介绍，因为Autoprefixer使用的是Browserslist

一、Browserslist

• github仓库：https://github.com/browsersli...

适用于以下前端工具:

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

package.json配置示例:

"browserslist": [
    "defaults",
    "not IE 11",
    "not IE_Mob 11",
    "maintained node versions"
]

或者在.browserslistrc文件配置示例:

# Browsers that we support

defaults
not IE 11
not IE_Mob 11
maintained node versions

开发者可以指定最近2个版本如：last 2 versions，让Browserslist针对指定工具，如：caniuse-lite 去查询数据匹配相应浏览器版本。

二、工具列表

• browserl.ist 是一个在线工具，用来检查某些查询会选择哪些浏览器。
• browserslist-ga 和 browserslist-ga-export 下载您的网站浏览器统计数据（>0.5%）
• browserslist-useragent-regexp 将Browserslist查询编译为RegExp以测试浏览器useragent。
• browserslist-useragent-ruby 是一个Ruby库，用于根据用户代理字符串检查浏览器是否匹配Browserslist。
• browserslist-browserstack 在Browserslist配置中为所有浏览器运行BrowserStack测试。
• browserslist-adobe-analytics 使用Adobe Analytics数据来定位浏览器。
• caniuse-api 返回支持某些特定特性的浏览器。

在项目目录中运行npx browserslist以查看项目的目标浏览器。这个CLI工具是内置的，并且可以在带有Autoprefixer的任何项目中使用。

三、最佳实践

以下是一个默认查询，为大多数用户提供一个合理的配置:

"browserslist": [
    "defaults"
]

如果你想改变浏览器的默认设置，我们建议结合最近的两个版本，如>0.2%。这是因为过去的n个版本本身并没有添加流行的旧版本，而仅使用超过0.2%的百分比就会使流行的浏览器在长期运行中更加流行。我们可能会陷入垄断和停滞状态，就像我们在使用Internet Explorer 6时一样。请小心使用此设置。

不仅限于chrome浏览器，请尊重浏览器多样性，不要因为不认识浏览器就删除它们。像Opera Mini在非洲拥有1亿用户，在全球市场上比微软Edge更受欢迎。中国QQ浏览器的市场份额超过了Firefox和桌面Safari浏览器的总和。

四、查询

Browserslist会使用浏览器和Node.js版本查询这些来源:

• .browserslistrc 配置文件在当前或父目录
• browserslist 配置文件在当前或父目录
• BROWSERSLIST 环境变量
• 如果上面的方法没有产生有效的结果，浏览器会使用默认值：> 0.5%, last 2 versions, Firefox ESR, not dead

五、查询组合

or方式支持or或,，如：last 1 version or > 1% 等于 last 1 version, > 1%

查询组合也支持执行交叉所有以前的查询: last 1 version or chrome > 75 and > 1% 的人会选择(browser last version 或 Chrome since 76)和超过1%的市场份额。

有三种不同的方式组合查询，如下所示。首先从单个查询开始，然后将查询组合起来得到最终的列表。

查询组合器类型	插图	示例
并集		> .5% or last 2 versions<br/>> .5%, last 2 versions
交集		> .5% and last 2 versions
排除		以下三个相等<br/>> .5% and not last 2 versions<br/>> .5% or not last 2 versions<br/>> .5%, not last 2 versions

测试查询的一种快速方法是：npx browserslist '> 0.5%, not IE 11'

六、完整列表

你可以通过查询来指定浏览器和Node.js版本(不区分大小写):

• defaults：Browserslist的默认浏览器（> 0.5%, last 2 versions, Firefox ESR, not dead）

• > 5%：根据全局使用统计数据选择浏览器版本，>=、<和<=处理

  • > 5% in US：使用美国的使用统计。它接受两个字母的国家代码
  • > 5% in alt-AS：使用亚洲地区的使用统计数据。所有地区代码的列表可以在caniuse-lite/data/regions找到
  • > 5% in my stats：使用自定义使用数据
  • > 5% in browserslist-config-mycompany stats：使用来自browserslist-config-mycompany/browserslist-stats.json的自定义使用数据
  • cover 99.5%：覆盖最流行的浏览器
  • cover 99.5% in US：同上，不过限制了两个字母的国家代码
  • cover 99.5% in my stats：覆盖最流行自定义使用数据的浏览器
• dead：24个月内没有官方支持或更新的浏览器，目前有：IE 10、IE_Mob 11、BlackBerry 10、BlackBerry 7、Samsung 4和OperaMobile 12.1

• last 2 versions：每个浏览器的最后两个版本

  • last 2 Chrome versions：最后两个版本的Chrome浏览器
  • last 2 major versions或last 2 iOS major versions：前两个主要版本的所有次要/补丁版本

• node 10和node 10.4选择最新的node.js10.x.x或10.4.x版本

  • current node：现在Browserslist使用的Node.js版本
  • maintained node versions：所有Node.js版本，仍然由Node.js Foundation维护

• iOS 7直接使用iOS浏览器7版

  • Firefox > 20：Firefox的更新版本超过20个，>=、<和<=处理，也可以使用node.js
  • ie 6-8：选择包含的版本范围
  • Firefox ESR：最新的[Firefox ESR]版本
  • PhantomJS 2.1和PhantomJS 1.9：选择类似于PhantomJS运行时的Safari版本
• extends browserslist-config-mycompany：从browserslist-config-mycompany npm包中获取查询
• supports es6-module：支持特定功能的浏览器。es6-module下面是可以使用页面的URL feat参数。所有可用特性的列表可以在caniuse-lite/data/features中找到
• since 2015或last 2 years：所有版本均于2015年发布(since 2015-03和since 2015-03-10)。未发布的版本或未发布的Chrome版本:alpha和beta版本
• unreleased versions或unreleased Chrome versions：alpha和beta版本
• not ie <= 8：排除先前查询所选择的浏览器

您可以将not添加到任何查询中。

七、调试

在项目目录中运行npx browserslist，查看您的查询选择了哪些浏览器

$ npx browserslist
and_chr 61
and_ff 56
and_qq 1.2
and_uc 11.4
android 56
baidu 7.12
bb 10
chrome 62
edge 16
firefox 56
ios_saf 11
opera 48
safari 11
samsung 5

八、浏览器

• Android： Android WebView
• Baidu：百度浏览器
• BlackBerry or bb：黑莓浏览器
• Chrome：谷歌浏览器
• ChromeAndroid or and_chr：谷歌android浏览器
• Edge：IE Edge.
• Electron for Electron framework：将被转换为Chrome版本
• Explorer or ie：IE浏览器.
• ExplorerMobile or ie_mob：IE手机浏览器
• Firefox or ff：火狐浏览器
• FirefoxAndroid or and_ff：火狐android浏览器
• iOS or ios_saf：IOS safari浏览器
• Node
• Opera：Opera浏览器
• OperaMini or op_mini：Opera Mini浏览器
• OperaMobile or op_mob：Opera 手机浏览器
• QQAndroid or and_qq：QQ android浏览器
• Safari：桌面safari浏览器
• Samsung：三星浏览器
• UCAndroid or and_uc：UC浏览器或UC android浏览器
• kaios：KaiOS浏览器

九、配置文件

1、package.json

{
  "private": true,
  "dependencies": {
    "autoprefixer": "^6.5.4"
  },
  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
  ]
}

2、.browserslistrc

# Browsers that we support

last 1 version
> 1%
IE 10 # sorry

Browserslist会检查path中每个目录中的配置。你可以把配置放到根目录，app/或app/styles，如：app/styles/main.css

可以在BROWSERSLIST_CONFIG环境变量中指定直接路径

十、共享配置

你可以使用下面的查询来引用从另一个包中导出的浏览器列表配置:

"browserslist": [
    "extends browserslist-config-mycompany"
]

出于安全原因，外部配置只支持带有browserslist-config-前缀的包。通过使用@scope/browserslist-config作为模块的命名或前缀，例如@scope/browserslist-config或@scope/browserslist-config-mycompany，也支持npm作用域包。

如果你不接受用户的Browserslist查询，也可以使用BROWSERSLIST_DANGEROUS_EXTEND环境变量或dangerousExtend选项来禁用验证。

BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack

也可以在包中引用特定的文件:

"browserslist": [
    "extends browserslist-config-mycompany/desktop",
    "extends browserslist-config-mycompany/mobile"
]

当编写共享的Browserslist包时，只需导出一个数组browserslist-config-mycompany/index.js:

module.exports = [
  'last 1 version',
  '> 1%',
  'ie 10'
]

还可以包含browserslist-stats.json文件作为你的共享配置的一部分在根和查询使用> 5% in browserslist-config-mycompany stats。它使用相同的格式extends和dangerousExtend属性如上。

您可以为不同的环境导出配置，并通过BROWSERSLIST_ENV或在工具中的env选项来选择环境:

module.exports = {
  development: [
    'last 1 version'
  ],
  production: [
    'last 1 version',
    '> 1%',
    'ie 10'
  ]
}

十一、针对不同环境进行配置

您还可以为各种环境指定不同的浏览器查询。BROWSERSLIST_ENV或NODE_ENV变量将选择查询。如果没有一个被声明，Browserslist会首先查找产品查询，然后使用默认值。

package.json：

"browserslist": {
    "production": [
        "> 1%",
        "ie 10"
    ],
    "modern": [
        "last 1 chrome version",
        "last 1 firefox version"
    ],
    "ssr": [
        "node 12"
    ]
}

.browserslistrc：

[production]
> 1%
ie 10

[modern]
last 1 chrome version
last 1 firefox version

[ssr]
node 12

十二、自定义使用数据

如果你有一个网站，你可以查询网站的使用统计数据。browserslist-ga会询问访问谷歌分析，然后生成browserslist-stats.json:

npx browserslist-ga

或者使用browserslist-ga-export来转换谷歌分析数据，而无需提供谷歌帐户的密码。

您可以通过任何其他方法生成使用统计信息文件。文件格式应如下:

{
  "ie": {
    "6": 0.01,
    "7": 0.4,
    "8": 1.5
  },
  "chrome": {
    …
  },
  …
}

注意，您可以查询自定义使用数据，同时还可以查询全局或区域数据。例如，查询> 1% in my stats, > 5% in US, 10%是允许的。

十三、JS API

const browserslist = require('browserslist')

// Your CSS/JS build tool code
function process (source, opts) {
  const browsers = browserslist(opts.overrideBrowserslist, {
    stats: opts.stats,
    path:  opts.file,
    env:   opts.env
  })
  // Your code to add features for selected browsers
}

查询可以是一个字符串"> 1%, IE 10"或一个数组['> 1%', 'IE 10']

如果查询丢失，Browserslist会查找配置文件。您可以提供一个路径选项(可以是一个文件)来查找与配置文件相对的配置文件。

参数项：

• path：文件或目录路径，以查找配置文件。默认是：./
• env：从配置中使用什么环境。默认生产
• stats：自定义使用统计数据
• config：配置文件路径
• ignoreUnknownVersions：忽略未知版本。默认false
• dangerousExtend：禁用扩展查询的安全检查。默认false
• mobileToDesktop：没有手机端使用桌面端。默认false

对于non-JS环境和调试目的，你可以使用CLI工具:

> browserslist "> 1%, IE 10"

您可以通过JS API获得所选浏览器的用户覆盖率:

browserslist.coverage(browserslist('> 1%'))
//=> 81.4

browserslist.coverage(browserslist('> 1% in US'), 'US')
//=> 83.1

browserslist.coverage(browserslist('> 1% in my stats'), 'my stats')
//=> 83.1

browserslist.coverage(browserslist('> 1% in my stats', { stats }), stats)
//=> 82.2

通过命令行CLI:

$ browserslist --coverage "> 1%"
These browsers account for 81.4% of all users globally

$ browserslist --coverage=US "> 1% in US"
These browsers account for 83.1% of all users in the US

$ browserslist --coverage "> 1% in my stats"
These browsers account for 83.1% of all users in custom statistics

$ browserslist --coverage "> 1% in my stats" --stats=./stats.json
These browsers account for 83.1% of all users in custom statistics

十四、环境变量

可以用环境变量来改变浏览器列表的设置

BROWSERSLIST

BROWSERSLIST="> 5%" npx webpack

BROWSERSLIST_CONFIG 配置文件

BROWSERSLIST_CONFIG=./config/browserslist npx webpack

BROWSERSLIST_ENV 环境变量

BROWSERSLIST_ENV="development" npx webpack

BROWSERSLIST_STATS 自定义使用数据

BROWSERSLIST_STATS=./config/usage_data.json npx webpack

BROWSERSLIST_DISABLE_CACHE 禁用缓存

BROWSERSLIST_DISABLE_CACHE=1 npx webpack

BROWSERSLIST_DANGEROUS_EXTEND 禁用安全性可共享配置名检查

BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack

十五、缓存

Browserslist从package.json和browserslist文件中读取缓存配置

也可以清楚缓存，示例：

browserslist.clearCaches()

要完全禁用缓存，请设置BROWSERSLIST_DISABLE_CACHE环境变量。

欢迎关注：技术开发分享录