【构建工具】Babel7.x快速配置

1. 安装依赖包

npm i -D @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime

npm i -S @babel/polyfill @babel/runtime-corejs2

1. @babel/core // Babel核心包
2. @babel/preset-env // env预设，即很多插件的集合
3. @babel/plugin-transform-runtime // transform-runtime插件
4. @babel/polyfill // 做API的兼容（npm install --save @babel/polyfill）
5. @babel/cli // Babel命令行
6. @babel/runtime（npm install --save @babel/runtime）
7. core-js // ES6+的polyfill工具函数
8. @babel/runtime-corejs2 （npm install --save @babel/runtime-corejs2）

注：

1. @babel/polyfill 引用core-js和regenerator-runtime
2. @babel/runtime 包含2个文件夹：helpers（定义了一些处理新的语法关键字的帮助函数）、regenerator（仅仅是引用regenerator-runtime这个npm包）
3. @babel/runtime-corejs2包含3个文件夹：core-js（引用core-js这个npm包）、helpers（定义了一些处理新的语法关键字的帮助函数）、regenerator（仅仅是引用regenerator-runtime这个npm包）
4. @babel/runtime-corejs3 同@babel/runtime-corejs3，版本升级了
5. @babel/plugin-transform-runtime 插件的功能是防止直接引用实现的代码。默认或”corejs”:false引用 @babel/runtime，"corejs": 2时引用@babel/runtime-corejs2，"corejs": 3时引用@babel/runtime-corejs3。

@babel/polyfill + @babel/runtime ≈ @babel/runtime-corejs2

2. Babel配置

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        "modules": false, // false为关闭commonjs引用包的方式，改为使用ESM，treeshaking生效
        "corejs": 2,
        "useBuiltIns": "usage", // false | entry | usage
      }
    ]
  ],
  plugins: [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2
        /*
         1. false，npm install --save @babel/runtime
         2. 2，npm install --save runtime-corejs2，即引用/连接到corejs的包
         3. 3，npm install --save runtime-corejs3
         注：使用2和3，corejs中的API就不会全局引入。
        */
      }
    ]
  ],
}

// .browserslistrc
last 2 version2
> 0.5%
IE 10

1. "useBuiltIns": "usage“，自动按需引用@babel/polyfill需要的API（如果Promise，默认以commonjs语法且为全局的方式引入：require("core-js/modules/es6-promise.js"，加重是两个问题，第4点和第5点是解决办法）。
2. "useBuiltIns": ”entry“或false时，需手动import "@babel/polyfill"（只能引一次，否则报错），会将所有@babel/polyfill需要的API引
3. Babel会根据浏览器设置.browserslistrc，动态去加载polyfill，如果.browserslistrc范围内的浏览器都支持Promise，Babel就不会引用require("core-js/modules/es6-promise.js")
4. @babel/plugin-transform-runtime配置参数"corejs": 2，可以将require("core-js/modules/es6-promise.js")改成_promise = require("@babel/runtime-corejs2/core-js")，也会将require("@babel/runtime/helpers/*")改成 ?? = require("@babel/runtime-corejs2/helpers/*")
5. class是新语法，会引用require("@babel/runtime/helpers/*")的工具函数转换class语法糖，即插件@babel/plugin-transform-runtime会帮助引用@babel/runtime中的工具函数
6. 如果不使用插件@babel/plugin-transform-runtime，则会将@babel/runtime中工具函数的实现直接打包到JS文件，即存在多份同样的实现代码，所以最好还是使用插件@babel/plugin-transform-runtime，缩小JS文件大小
7. 以上都是用require("")方式引用Babel中的包，会导致webpack treeshaking失效，preset-env配置modules: false

3. 总结

• Babel作用：将ES6+语法转成ES5语法，只转语法，不转API（即ECMAScript新的API）
• Promise、Map、WeakMap等新API，会通过import "@babel/polyfill"或配置"useBuiltIns": "usage"来引用core-js中polyfill的API