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