Babel-7-转码二-babelpresetenv-babelpolyfill

jiezi

5 年前

@babel/preset-env + @babel/polyfill

@babel/preset-env + @babel/polyfill 可以完全实现 ES 基础语法的转译 + 新 API 的转译，这是配置 Babel 转码的第一种方式。

基本的语法转换，需要添加预设 @babel/preset-env。

安装依赖包
```
yarn add @babel/preset-env -D
```

添加配置

{
  "presets": [
    [
       "@babel/preset-env",
       {"modules": false, // 对 ES6 的模块文件不做转化，以便使用 tree shaking、sideEffects 等}
    ]
  ],
  "plugins": []}

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。
转译新的 API，需要借助 polyfill 方案去解决，使用 @babel/polyfill 或@babel/plugin-transform-runtime，二选一即可。

本质上 @babel/polyfill 是 core-js 库的别名，随着 core-js@3 的更新，@babel/polyfill 无法从 2 过渡到 3，所以 @babel/polyfill 已经被放弃，请查看 corejs 3 的更新。

安装依赖包：
```
yarn add @babel/polyfill  -D
```

.babelrc 文件写上配置，@babel/polyfill 不用写入配置，会根据 useBuiltIns 参数去决定如何被调用。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "modules": false,
        "corejs": 2, // 新版本的 @babel/polyfill 包含了 core-js@2 和 core-js@3 版本，所以需要声明版本，否则 webpack 运行时会报 warning，此处暂时使用 core-js@2 版本（末尾会附上 @core-js@3 怎么用）}
    ]
  ]
}

配置参数
1. modules，"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false，默认值是 auto。
  用来转换 ES6 的模块语法。如果使用 false，将不会对文件的模块语法进行转化。
  如果要使用 webpack 中的一些新特性，比如 tree shaking 和 sideEffects，就需要设置为 false，对 ES6 的模块文件不做转化，因为这些特性只对 ES6 的模块有效。
2. useBuiltIns，"usage" | "entry" | false，默认值是 false。
  - false：需要在 js 代码第一行主动 import ‘@babel/polyfill’，会将 @babel/polyfill 整个包全部导入。
    （不推荐，能覆盖到所有 API 的转译，但体积最大）
  - entry：需要在 js 代码第一行主动 import ‘@babel/polyfill’，会将 browserslist 环境不支持的所有垫片都导入。
    （能够覆盖到‘hello‘.includes(‘h‘)这种句法，足够安全且代码体积不是特别大）
  - usage：项目里不用主动 import，会自动将代码里已使用到的、且 browserslist 环境不支持的垫片导入。
    （但是检测不到‘hello‘.includes(‘h‘)这种句法，对这类原型链上的句法问题不会做转译，书写代码需注意）
3. targets，用来配置需要支持的的环境，不仅支持浏览器，还支持 node。如果没有配置 targets 选项，就会读取项目中的 browserslist 配置项。
4. loose，默认值是 false，如果 preset-env 中包含的 plugin 支持 loose 的设置，那么可以通过这个字段来做统一的设置。