Babel 之 @babel/preset-env_问卿何如

网络 02-07 3217

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