Babel 之 @babel/preset-env

Babel 已经成为前端工程化开发的必备工具链。自 Babel 7.0 以后，Babel 进一步对工具优化和插件统一管理，全面迁移到 @babel 中。@babel/preset-env 是十分常用的一组预先设定的插件，今天就来简单聊聊这个插件

@babel/preset-env

这是一个智能预设，它允许你使用最新的 JavaScript 语法，而无需对目标环境需要哪些语法转换进行管理。

npm install @babel/core @babel/preset-env -D

@babel/preset-env 依赖了一些优秀的开源项目,比如: browserslist, compat-table, electron-to-chromium 等.

@babel/preset-env 不会包含任何低于 Stage 3 的 JavaScript 语法提案，因为在 TC39 流程的那个阶段，它无论如何都不会被任何浏览器实现。这些要支持的语法都将需要手动包含。 shippingProposals 选项将包括一些浏览器已经实现的 Stage 3 提案。

@babel/preset-env takes any target environments you’ve specified and checks them against its mappings to compile a list of plugins and passes it to Babel.

简而言之,@babel/preset-env 就是利用你指定的任何目标环境,然后检查它们对应的插件,并传给 Babel 进行转译.

安装好 @babel/preset-env 后,需要在工程更目录新建一个配置文件 .babelrc 或者 babel.config.js :

{
	"presets": [
		[
			"@babel/preset-env"
		]
	]
}

如果不指定其他配置选项,比如 targets, @bable/preset-env 会将所有的 ECMAScript 2015+ 代码按照默认配置进行转换.

通常,不推荐这样使用, 因为这样就没有利用到其支持特定浏览器的能力.

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": {
					"chrome": "68",
					"ie": "11"
				}
			}
		]
	]
}

Options: targets

描述项目支持的目标环境, 可以是一个 browserlist-compatible 查询语句, 或者是一个描述支持的最小的环境版本的对象

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": "> 0.25%, not dead"
			}
		]
	]
}

不过,一般我们会直接使用 .browserslistrc 配置文件指定 tagets , 或者直接在 package.json 中配置 browserslist 选项,这样同时可以被其他生态内的工具使用,比如 autoprefixer .

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": {
					"chrome": "68",
					"ie": "11"
				}
			}
		]
	]
}

而描述一个对象是十分简单的方式,如上代码所示.

其包括的环境有如下: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron

Options: targets.esmodules

如果代码运行的浏览器支持 ES Modules,应当指定如下配置.不过,此时 browsers 选项将被忽略

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": {
					"esmodules": true
				}
			}
		]
	]
}

Options: targets.browsers

这是一个利用 browserlist 的查询选项 (这个选项将会被移除)

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": {
					"browsers": "> 0.25%, not dead"
				}
			}
		]
	]
}

效果同

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": "> 0.25%, not dead"
			}
		]
	]
}

Options: include

指定包含的插件的数组

其合法的配置如下:

• Babel plugins

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": "> 0.25%, not dead",
				"include": [
					"@babel/plugin-transform-spread",
					"plugin-transform-spread"
				]
			}
		]
	]
}

注意: 代码前缀 @babel/ 和不带前缀,都是支持的

• Built-ins , 这个就是配置支持 core-js@2 和 core-js@3 , 如 es.map, es.set, es.object.assign 等

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": "> 0.25%, not dead",
				"include": [
					"@babel/plugin-transform-spread",
					"plugin-transform-spread",
					"es.map",
					"es.object.assign"
				]
			}
		]
	]
}

插件的名字,可以是完整的,部分的,还可以使用正则表达式:

• 全称(string): "es.object.assign"

• 部分名称(string): "es.object.*" , 这个会解析所有以 es.object 为前缀的插件模块

• 正则表达式(object): /^transform-.*$/ 或者 new RegExp("^transform-.*")

Options: exclude

设置不包含或者移除的插件数组,配置方法与 include 选项类似.

{
	"presets": [
		[
			"@babel/preset-env", {
				"targets": "> 0.25%, not dead",
				"include": [
					"@babel/plugin-transform-spread",
					"plugin-transform-spread",
					"es.map",
					"es.object.assign"
				],
				"exclude": [
					"/^transform-.*$/"
				]
			}
		]
	]
}

Options: useBuiltIns

数据类型: "usage" "entry" | false, 默认为 false.

这个选项主要是指定 @babel/preset-env 将如何处理 polyfill,通常与 corejs选项配合使用.

{
	"presets": [
		[
			"@babel/preset-env", {
				"useBuiltIns": "usage",
				"corejs": "3"
			}
		]
	]
}

还有一些其他的选项,可以查看官方文档: @babel/preset-env