@babel/preset-env

@babel/preset-env 是 Babel6 时代 babel-preset-latest 的增强版。这个包除了进行语法转换，该预设还可以通过设置参数项进行针对性语法转换以及 polyfill 的部分引入。我们在 Babel 配置文件里指定使用它。如果不使用的话，也可以完成转码，但转码后的代码仍然是 ES6 的，相当于没有转码。

重点需要掌握的参数项：targets、useBuiltIns、modules和corejs。

1、targets

该参数项可以取值为字符串、字符串数组或对象，不设置的时候取默认值空对象{}。

该参数项的写法与 browserslist 是一样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "plugins": [
    ...
  ],
  "presets": [ 
    [
      "@babel/preset-env", 
      {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }
    ],
  ]
}

如果我们对 @babel/preset-env 的 targets 参数项进行了设置，那么就不使用 browserslist 的配置，而是使用 targets 的配置。如不设置 targets，那么就使用 browserslist 的配置。如果 targets 不配置，browserslist 也没有配置，那么 @babel/preset-env 就对所有 ES6 语法转换成 ES5 的。

正常情况下，我们推荐使用 browserslist 的配置而很少单独配置 @babel/preset-env 的 targets。

2、useBuiltIns

useBuiltIns 项取值可以是”usage”（7.4版本后稳定） 、 “entry” 或 false。如果该项不进行设置，则取默认值 false。

useBuiltIns 这个参数项主要和 polyfill 的行为有关。在我们没有配置该参数项或是取值为 false 的时候，polyfill 会全部引入到最终的代码里。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "plugins": [
    ...
  ],
  "presets": [ 
    [
      "@babel/preset-env", 
      {
         "useBuiltIns": xxx, // entry、usage、false
      }
    ],
  ]
}

‘entry’ 与’usage’ 的区别：

  • ‘entry’这种方式不会根据我们实际用到的API进行针对性引入polyfill，而’usage’可以做到。
  • ‘entry’需要我们在项目入口处手动引入 polyfill，而’usage’不需要。
3、corejs

该参数项的取值可以是2或3，没有设置的时候取默认值为2（还有一种对象 proposals 取值方法，我们实际用不到，忽略掉即可）这个参数项只有useBuiltIns设置为’usage’或’entry’时，才会生效。

4、modules

这个参数项的取值可以是”amd”、”umd” 、 “systemjs” 、 “commonjs” 、”cjs” 、”auto” 、false。在不设置的时候，取默认值”auto”。

该项用来设置是否把ES6的模块化语法改成其它模块化语法。

我们常见的模块化语法有两种：（1）ES6的模块法语法用的是 import 与 export；（2）commonjs模块化语法是 require 与 module.exports。

在该参数项值是’auto’或不设置的时候，会发现我们转码前的代码里import都被转码成require了。

如果我们将参数项改成false，那么就不会对ES6模块化进行更改，还是使用import引入模块。

使用ES6模块化语法有什么好处呢。在使用Webpack一类的打包工具，可以进行静态分析，从而可以做tree shaking 等优化措施。

@babel/plugin-transform-runtime

三大作用：

  • 自动移除语法转换后内联的辅助函数（inline Babel helpers），使用@babel/runtime/helpers里的辅助函数来替代；

  • 当代码里使用了core-js的API，自动引入@babel/runtime-corejs3/core-js-stable/，以此来替代全局引入的core-js/stable;

  • 当代码里使用了Generator/async函数，自动引入@babel/runtime/regenerator，以此来替代全局引入的regenerator-runtime/runtime；

主要的配置项：helpers、corejs、regenerator、useESModules、absoluteRuntime和version。

helpers

该项是用来设置是否要自动引入辅助函数包，这个我们当然要引入了，这是@babel/plugin-transform-runtime的核心用途。该项取值是布尔值，我们设置为true，其默认值也是true，所以也可以省略不填。

corejs和regenerator

这两项是用来设置是否做API转换以避免污染全局环境，regenerator取值是布尔值，corejs取值是false、2和3。这个上一节已经讲过了，在前端业务项目里，我们一般对corejs取false，即不对Promise这一类的API进行转换。而在开发JS库的时候设置为2或3。regenerator取默认的true就可以

useESModules

该项用来设置是否使用ES6的模块化用法，取值是布尔值。默认是fasle，在用webpack一类的打包工具的时候，我们可以设置为true，以便做静态分析。

absoluteRuntime

该项用来自定义@babel/plugin-transform-runtime引入@babel/runtime/模块的路径规则，取值是布尔值或字符串。没有特殊需求，我们不需要修改，保持默认false即可。

version

该项主要是和@babel/runtime及其进化版@babel/runtime-corejs2、@babel/runtime-corejs3的版本号有关系，这三个包我们只需要根据需要安装一个。我们把安装的npm包的版本号设置给version即可。例如，在上节的babel14例子里，安装的@babel/runtime-corejs3版本是’^7.10.4’，那么配置项version也取’^7.10.4’。
其实该项不填取默认值就行，目前填写版本号主要是可以减少打包体积。

@babel/polyfill 无法提供 core-js@2 向 core-js@3 过渡

Babel7 转码（五）- corejs3 的更新