javascript-browserslist-在不同的前端工具间共享目标浏览器

javascript browserslist - 在不同的前端工具(Autoprefixer, Stylelint, babel-preset-env)之间共享目标浏览器。

github地址：
	https://github.com/browserslist/browserslist

官网：
	https://twitter.com/browserslist

浏览器检测网站：
	https://caniuse.com

browserslist 字符串，查找到的浏览器列表，以及市场总的占有率查看
	https://browserl.ist


文档翻译:
	可用于：
		Autoprefix
		Babel
		...

	每个工具如何使用 browserslist 的示例，可以在下面链接查看：
		https://github.com/browserslist/browserslist-example

	当我们在 'package.json' 文件中，添加合适的配置，所有工具将会自动发现目标浏览器：
		{
			"browserslist": [
				"last 1 version",
				"> 1%",
				"maintained node versions",
				"not dead"
			]	
		}

	或者在 '.browserslistrc' 文件来配置：
		last 1 version
		> 1%
		maintained node versions
		not dead

	我们可以在查询中(例如：last 2 version)，设置版本列表，从而避免了手动更新版本。Browserslist 会从 'Can I Use' 网站(http://caniuse.com/)，进行查询，从而筛选出指定的版本。

	Browserslist 可以从 '工具选项'、 'browserslist' 配置、'.browserslistrc' 配置、'package.json 中的 browserslist 片段' 或 '环境变量' 来设置查询。

	我们可以在 'https://browserl.ist' 测试 Browserslist 的查询。

	工具：
		browserslist-ga - 下载您的网站的浏览器统计信息，用于在 '> 0.5% in my stats' 查询字符串进行查询

		browserslist-useragent - 通过 user agent 来检查浏览器，来匹配 Browserslist 目标浏览器查询

		browserslist-useragent-ruby - 同上，不过是基于 ruby

		caniuse-api - 返回支持某些特定功能的浏览器

		在项目目录运行 npx browserslist，来查看项目的目标浏览器。该 CLI 工具是内置的，并且在任意的 'Autoprefix' 项目里都可用。

	查询：
		Browserslist 可以从以下的来源，进行查询，来使用浏览器和 Node.js 版本：
			1.当前目录或父级目录的 package.json 文件里的 browserslist 键。(推荐使用此方法)
			2.工具选项。例如，在 Autoprefix 中的 browsers 选项。
			3.BROWSERSLIST 环境变量
			4.当前目录或父级目录的 browserslist 配置文件
			5.当前目录或父级目录的 .browserslistrc 配置文件
			6.如果以上方法不能产生一个有效的解决，Bro	wserslist 将默认使用：> 0.5%, last 2 versions, Firefox ESR, not dead。

		最佳实践
			1.仅当我们专门为一个浏览器终端创建 web app时，才直接使用浏览器(last 2 Chrome versions)。市场上有很多浏览器。如果我们正在创建一个通用的 web app，我们应该尊重浏览器的多样性。

			2.如果你想更改浏览器的默认集合，我们建议将 last 1 version、not dead 和 > 0.2%(或 > 1% in US, > 1% in my stats) 结合起来使用。'last n versions' 添加了太多的死浏览器，并未添加流行的旧版浏览器。> 0.2% 使得流行浏览器更受欢迎，这样，我们将会有垄断(monopoly)和停滞(stagnation)，就像我们使用 IE6 一样。

			3.不要仅因为您不了解浏览器而删除它们。 Opera Mini 在非洲拥有1亿用户，它在全球市场上比 Microsoft Edge 更受欢迎。QQ 浏览器的市场份额比 Firefox 和桌面 Safari 都要多。

		全部列表
			我们可以通过以下查询条件，来执行浏览器和 Node.js 版本(忽略大小写)：
				> 5% - 根据全球使用统计来选择浏览器版本。也可以使用 '>=', '<', '<='。
				> 5% in US - 使用 USA 的使用统计。接受 '2个字母的国家/地区代码'。(https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements)
				> 5% in alt-AS - 使用 alt-AS (alt-AS - 亚洲区域)的使用统计。所有的地区代码可在后面链接找到。(https://github.com/ben-eb/caniuse-lite/tree/master/data/regions)
				> 5% in my stats - 使用 '自定义使用数据'
				cover 99.5% - 基于覆盖率
				cover 99.5% in US
				cover 99.5% in my stats
				maintained node versions - 所有 Node.js 版本，仍然由 Node.js 基金会维护(https://github.com/nodejs/Release)
				node 10 和 node 10.4 - 选择最新的 Node.js 10.x.x 或 10.4.x 发布版
				current node - Browserslist 目前使用的 Node.js 版本
				extends browserslist-config-mycompany - 从 'browserslist-config-mycompany' npm 包获取查询字符串
				ie 6-8 - 选择一个范围的版本
				Firefox > 20 - 高于 20 版本的火狐。也可以使用 '>=', '<', '<='。
				iOS 7 - 直接指定 iOS 浏览器版本 7。
				Firefox ESR - 最新的 [火狐 ESR] 版本。
				unreleased versions 或 unreleased Chrome versions - alpha 和 beta 版本。
				last 2 major versions 或 last 2 iOS major versions - 最近2个主版本的所有次要(minor)/补丁(patch)版本。
				since 2015 或 last 2 years - 2015 年起发布的所有版本。(也可以是 since 2015-03 或 since 2015-03-11)
				dead - last 2 versions, < 5%，并且24个月内官方未提供支持或更新。目前有：IE 10, IE_Mob 10, BlackBerry 10, BlackBerry 7, OperaMobile 12.1。
				last 2 versions - 每个浏览器最新的2个版本
				last 2 Chrome versions - Chrome 浏览器最新的2个版本
				defaults - Browserslist 的默认浏览器查询字符串(> 0.5%, last 2 versions, Firefox ESR, not dead)
				not ie <= 8 - 排除所有低于 ie 8 的版本

			我们可以给任何查询前，添加 not

		调试
			在项目目录，运行 npx browserslist，来查看我们的查询条件，都选择了哪些浏览器
				npx browserslist

		注意
			Browserslist 适用于不同版本的浏览器。应该避免类似：Firefox > 0 这种查询。

			多查询，使用 'OR' 来组合。浏览器版本必须匹配至少一个查询。

			所有查询都是基于 'Can I Use' 支持的数据，例如：last 3 iOS versions，可能选中 8.4、9.2、9.3（主版本和次版本混合），而 last 3 Chrome versions 可能选中 50、49、48(只有主版本)

		浏览器
			Android
			Baidu
			BlackBerry 或 bb
			Chrome
			ChromeAndroid 或 and_chr
			Edge
			Electron
			Explorer 或 ie
			ExplorerMobile 或 ie_mob
			Firefox 或ff
			FirefoxAndroid 或 and_ff
			iOS 或 ios_saf
			Node
			Opera
			OperaMini 或 op_mini
			OperaMobile 或 op_mob
			QQAndroid 或 and_qq
			Safari
			Samsung
			UCAndroid 或 and_uc

	package.json
		如果想在项目根目录，减少配置文件，可以在 package.json 的 browserslist 字段进行配置
			{
			  	"private": true,
			  	"dependencies": {
			    	"autoprefixer": "^6.5.4"
			  	},
			  	"browserslist": [
			    	"last 1 version",
			    	"> 1%",
			    	"IE 10"
			  	]
			}

	配置文件
		Browserslist 配置文件，应该命名为 .browserslistrc 或 browserslist，文件内每行只能写一个查询条件
			last 1 version
			> 1%
			IE 10

		Browserslist 会检查 'path' 路径下的每个目录，来搜索配置文件。因此，如果工具处理 'app/styles/main.css'，我们可以将配置文件放在 app/ 或 app/styles

		我们可以在 BROWSERSLIST_CONFIG 环境变量，来指定上面提到的 'path' 路径。

	可共享的配置
		我们可以使用下面的查询，从另一个包导入 Browserslist 配置：
			"browserslist": [
				"extends browserslist-config-mycompany"
			]

		出于安全考虑，外部配置仅支持具有 'browserslist-config-' 前缀的包。通过使用 '@scope/browserslist-config' 命名或者前缀化模块，也支持 npm 范围包(npm scoped packages)，例如：@scope/browserslist-config 或 @scope/browserslist-config-mycompany。

		如果你不接受来自用户的浏览器查询，可以通过使用 'dangerousExtend' 选项来禁用验证：
			browserslist(queries, { path, dangerousExtend: true })

		由于这种方式使用了 npm 解析，我们还可以引用指定包的指定文件：
			"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，我们可以通过设置 '环境变量' 来改变浏览器设置：

			BROWSERSLIST - 指定浏览器查询条件
				BROWSERSLIST="> 5%" gulp css

			BROWSERSLIST_CONFIG - 指定配置文件路径
				BROWSERSLIST_CONFIG=./config/browserslist gulp css

			BROWSERSLIST_ENV - 指定所处环境
				BROWSERSLIST_ENV="development" gulp css

			BROWSERSLIST_STATS - 指定 '> 1% in my stats' 查询，所参考的自定义的使用数据的路径(以后使用 in my stats，将会根据该文件的数据来查询浏览器)
				BROWSERSLIST_STATS=./config/usage_data.json gulp css

			BROWSERSLIST_DISABLE_CACHE - 禁用从缓存中读取配置
				BROWSERSLIST_DISABLE_CACHE=1 gulp css

	环境
		我们也可以为不同的环境指定不同的浏览器查询。Browserslist 会根据 'BROWSERSLIST_ENV' 或 'NODE_ENV' 变量来选择查询条件。如果没有声明不同环境的查询条件，Browerslist 将首先查找 'production' 环境的查询条件，没有的话，则使用默认。

		在 package.json 文件:
			"browserslist": {
			    "production": [
			      	"> 1%",
			      	"ie 10"
			    ],
			    "development": [
			      	"last 1 chrome version",
			      	"last 1 firefox version"
			    ]
			}

		在 .browserslistrc 配置文件：
			[production staging]
			> 1%
			ie 10

			[development]
			last 1 chrome version
			last 1 firefox version

	自定义使用数据
		如果你有自己的网站，则可以根据网站的使用情况的统计来查询。'browserslist-ga' 要求访问 Google Analytics，然后生成 browserslist-stats.json：
			npx browserslist-ga

		当然，你可以通过其他任何方法来生成使用情况统计文件。文件格式应该如下：
			{
			  	"ie": {
			    	"6": 0.01,
			    	"7": 0.4,
			    	"8": 1.5
			  	},
			  	"chrome": {
			    	…
			  	},
			  	…
			}

		注意，我们可以在使用自定义使用数据查询的同时，结合其他查询。例如：> 1% in my stats, > 5% in US, 10%。

	JS API
		var browserslist = require('browserslist');

		// Your CSS/JS build tool code
		var process = function (source, opts) {
		    var browsers = browserslist(opts.browsers, {
		        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' 选项(这可以是一个文件)，相对它的路径来查找配置文件。

		选项：
			path - 用于查找配置文件的文件或目录路径。默认是 '..'
			env - 使用配置的环境。默认是 'production'
			stats - 自定义的使用情况统计数据
			config - 手动设置的配置路径
			ignoreUnknownVersions - 不要直接给出查询字符串(例如：ie 12)，是 boolean 类型。默认是 false
			dangerousExtend - 禁用 'extend' 查询的安全检查。默认是 false

		对于 '非-JS' 环境的调试，可以使用 CLI 工具：
			browserslist "> 1%, IE 10"

	覆盖率
		可以通过 JS API 获得所选浏览器的总用户的覆盖率：
			browserslist.coverage(browserslist('> 1%'))
			browserslist.coverage(browserslist('> 1% in US'), 'US')
			browserslist.coverage(browserslist('> 1% in my stats'), 'my stats')
			browserslist.coverage(browserslist('> 1% in my stats', { stats }), stats)

		或者通过 CLI 来获取：
			browserslist --coverage "> 1%"	
			browserslist --coverage=US "> 1% in US"
			browserslist --coverage "> 1% in my stats"
			browserslist --coverage "> 1% in my stats" --stats=./stats.json

	缓存
		Browserslist 在托管期间，从 package.json 和 browserslist 配置文件读取配置并缓存。

		清除这些缓存，使用：
			browserslist.clearCaches();

		要完全禁用缓存，设置 'BROWSERSLIST_DISABLE_CACHE' 环境变量=1