【构建工具】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

你可能感兴趣的:(前端开发,前端)