翻译Babel文档之@babel/preset-env

Babel已成为前端工程化开发的必备工具链, 而@babel/preset-env(babel7.0 之后的插件与预设以@babel为前缀)是经常使用的一组预先设定的插件, Babel中文网暂未对该部份内容作翻译, 本文是对Babel英文官方文档中@babel/preset-env内容的翻译, 前端小xuo生英语渣渣水平有限, 欢迎指正与交流

@babel/preset-env

@babel/preset-env是一个智能的babel预设, 让你能使用最新的JavaScript语法, 它会帮你转换成代码的目标运行环境支持的语法, 提高你的开发效率并让打包后的代码体积更小

安装

使用npm

npm install --save-dev @babel/preset-env
复制代码

使用yarn

yarn add @babel/preset-env --dev
复制代码

运行机制

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

咱们利用这些数据源维护和加强Babel语法转换、语法实现, 来支持对应的目标环境的版本的语法、特征

注意@babel/preset-env不支持stage-x的插件

@babel/preset-env利用你指定的任何目标环境, 检查它们对应的插件并传给Babel

浏览器列表集合

对基于浏览器或者Electron的项目, 咱们推荐使用一个.browserslistrc文件指定编译目标.若是你已经有了这个配置文件, 它将被不少前段工程化生态的工具利用到, 好比 autoprefixer, stylelint, eslint-plugin-compat...

若是没有配置targets或者ignoreBrowserslistConfig, @babel/preset-env将使用默认的Browserslist配置

若是你想支持市场份额大于0.25%并且忽略安全更新的浏览器如IE 10和BlackBerry的语法转换和语法实现, 你能够采用以下的配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}
复制代码

.browserlistrc

> 0.25%
not dead
复制代码

或者你能够在package.json文件里配置

"browserslist": "> 0.25%, not dead"
复制代码

配置项

若是你想获取更多关于配置项和预设的文档, 可参考preset options文档

targets

数据类型: string | Array<string> | { [string]: string }, 默认 {}

描述你的项目支持的目标环境

其能够是一个browserslist-compatible查询语句

{
  "targets": "> 0.25%, not dead"
}
复制代码

或者是一个描述支持的最小的环境版本的对象

{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}
复制代码

环境如: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron

注意, 若是不指定targets, @babel/prest-env会将全部的ECMAScript 2015+代码按照默认的配置去转换

咱们不推荐这样使用, 由于这样没有利用到其支持特定浏览器的能力

{
  "presets": ["@babel/preset-env"]
}
复制代码

targets.esmodules

数据类型: boolean

若是你代码运行的浏览器支持ES Modules(www.ecma-international.org/ecma-262/6.…), 当指定以下的配置, browers字段将被忽略, 你能够配合<script type="module"></script>专门为用户提供更小体积的代码文件(jakearchibald.com/2017/es-mod…)

请注意: 若是这样指定esmodules编译目标, browsers字段将被忽略

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

targets.node

数据类型: string | "current" | true

若是你的编译针对当前的node版本, 你能够指定node配置项, 若是你指定为curren, 将等同于 "node": process.versions.node

targets.safari

数据类型: string | "tp"

若是你将针对Safari浏览器的技术预览版technology preview版本去编译, 能够指定"safari": "tp"

targets.browsers

数据类型: string | Array<string>

一个利用browserlist的查询选项, 如last 2 versions, > 5%, safari tp

注意, browsers的结果将被targets中冲突的项目覆写

注意: 这个配置项将在后期的版本里被移除, 利于只直接设置targets成一个查询语句

spec

数据类型: boolean, 默认为false

为一些容许的可是潜在的会比较慢的插件或者预设作配置

loose

数据类型: boolean, 默认为false

容许支持loose transformations的插件或者预设

modules

数据类型: "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, 默认为 "auto"

允转换ES6模块语法为其余的模块类型

设置为false将不会转换模块

注意cjs是commonjs的一个别名

debug

数据类型: boolean, 默认为false

console.log输出编译目标或者使用的插件在plugin data version中指定的版本

include

数据类型: Array<string|RegExp>, 默认为[]

一个常常包含的插件的数组

合法的配置包括:

• Babel plugins, @babel/plugin-transform-spread与不带前缀的plugin-transform-spread都支持
• Built-ins(同时支持cores-js@2和cores-js@3, 如es.map, es.set, 或者es.object.assign)

插件的名字能够用完整的或者部分的去指定, 或者使用正则表达式

能够接收的输入:

• 全称(string): "es.math.sign"
• 部分名称(string): "es.math.*"(解析为全部以es.math为前缀的插件)
• 正则(Object): /^transform-.*$/ 或者 new RegExp("^transform-modules-.*")

注意以上正则表达式里的.至关于匹配全部的字符, 不只仅是.字符. 并且注意正则表达式里.*与glob里*相反

若是一个原生的实现或者一节结合了不支持的特性加上支持的特性失效时, 这个选项对于debug会颇有用

例如, Node 4支持原生的classes可是不支持spread, 若是super和参数spread一块儿使用, @babel/plugin-transform-classes须要被include, 否则的话就不可能被转译

注意: include和exclude选项仅在插件被预设包含时才会生效, 因此, 举个例子, 包含@babel/plugin-proposal-do-expressions, 或者排除@babel/plugin-proposal-function-bind将会报错, 若是要时候用预设里不包含的插件, 请直接将其添加至plugins

exclude

数据类型: Array<string|RegExp>, 默认为[]

一个记录不包含或者移除的插件的数组

可能的配置与include选项相似

这个选项至关于黑名单, 若是你不使用generators并且当配置useBuiltIns时不想包含regeneratorRuntime, 或者利用其它如fast-async的插件替换Babel's async-to-gen

useBuiltIns

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

这个选项配置了@babel/preset-env如何处理polyfill

当usage或者entry选项被使用, @babel/preset-env将直接饮用cores-js模块至关于暴露imports或者requries, 这一位置core-js将被直接解析到文件自己并且须要可访问

由于@babel/polyfill在Babel 7.4.0已被废弃, 咱们推荐直接添加core-js和经过corejs选项设置版本

npm install core-js@3 --save

# or

npm install core-js@2 --save
复制代码

useBuiltIns: 'entry'

注意: 你的整个app里只能使用一次import "core-js 和import "regenerator-runtime/runtime". 若是你正在使用@babel/polyfill, 其已包含了core-js和regenerator-runtime: 若是屡次引入它或报错.屡次引入这些包将致使全局的冲突和其它难易追踪的问题. 咱们推荐建立一个只包含import声明的单入口文件

当须要根据不一样的基于环境的入口须要引入不一样的core-js时, 这个选项容许一个新的插件来替换import "core-js/stable"和import "regenerator-runtime/runtime"声明(或者require("corejs")和require("regenerator-runtime/runtime"))

In

import "core-js";
复制代码

Out(基于不一样的环境)

import "core-js/modules/es.string.pad-start";
import "core-js/modules/es.string.pad-end";
复制代码

引入"core-js"加载了对于每个可能的ECMAScript特性的语法填充, 若是你知道你只须要他们其中的某一部分呢, 当使用core-js@3和@babel/preset-env, 可以对每个core-js入口和其依赖的优化. 好比, 你看值须要填充数组方法和新的Math提案:

In

import "core-js/es/array";
import "core-js/proposals/math-extensions";
复制代码

Out(基于不一样的环境)

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/esnext.math.clamp";
import "core-js/modules/esnext.math.deg-per-rad";
import "core-js/modules/esnext.math.degrees";
import "core-js/modules/esnext.math.fscale";
import "core-js/modules/esnext.math.rad-per-deg";
import "core-js/modules/esnext.math.radians";
import "core-js/modules/esnext.math.scale";
复制代码

你能够阅读core-js的文档获取关于不一样入口的信息

注意: 当使用core-js@2(使用corejs: 2配置项或者隐式使用), @babel/preset-env将也引入@babel/polyfill. 这种行为已被废弃, 由于不可能与@babel/polyfill使用不一样的core-js版本

useBuiltIns: 'usage'

当文件里被使用时, 添加特定的引入来语法填充, 咱们利用它, 一个打包的文件只会加载一次相同的语法填充

In

a.js

var a = new Promise();
复制代码

b.js

var b = new Map();
复制代码

Out(若是环境须要语法填充)

import "core-js/modules/es.promise";
var a = new Promise();
复制代码

import "core-js/modules/es.map";
var b = new Map();
复制代码

Out(若是环境支持该语法)

var a = new Promise();
复制代码

var b = new Map();
复制代码

useBuiltIns: false

不在每个文件自动添加语法填充, 不转换import "core-js"和import "@babel/polyfill"为单独的语法填充

corejs

数据结构: 2, 3 或者 { version: 2 | 3, proposals: boolean }, 默认为 2

这个选项只会在与useBuiltIns: usage或者useBuiltIns: entry一块儿使用时才会生效, 确保@babel/preset-env为你的core-js版本注入了正确的引入