Babel 配置工程师应知应会

Babel

Sorry，标题党了，本文仅介绍 Babel 相关生态和一些配置心得。

babel-register: 以文件形式实现 babel-node 功能，多用于实时编译

// 以下相当于 babel-node ./test --presets react
require('babel-register')({ presets: ['react'] });
require('./test')

babel-plugin-external-helpers: 把 helpers 收集到一个共享模块或共享文件。
helper 函数是 babel 在 transform 时候常用的工具函数，对编译模块时，会将用到的 helpers 放到模块顶部。如果编译多个文件，就会重复引用，导致每个模块都定义一份。

babel-runtime: polyfill （内含 core.js 和 regenerator）、helpers 集合
babel-polyfill: 和 babel-runtime 类似，但直接整体引入目标环境中
babel-plugin-transform-runtime: 和 babel-polyfill 一样，但是不是一次性引入全部 polyfill，而是根据你该文件用到多少，引多少

对比上述两种 polyfill 方案，写库用 transform-runtime，写应用就 babel-polyfill

基本都是使用 preset-env + 几个 stage，一般来说到 stage-2 就可以了。

debug: 用来看最终引入了哪些 polyfill、plugins
useBuiltIns: 必须配合 babel-polyfill，貌似加入了此项以后，会得到类似于 babel-plugin-transform-runtime 的效果。但是根据实验得出，还是 transform-runtime 在减肥上的效果更好。而且它不处理 helpers，你还是不能省略 external-helpers 这个插件
modules: 是否编译模块导入导出语句
webpack 和 rollup 都可以对 es 模块做 Tree Shaking，所以要设置 modules 为 false
loose: 宽松模式，编译的结果在运行时，其内部并不严格遵循 es6 标准
通过减少判断和限制，有效提高效率甚至包体积
exclude/include: 编译时排除或使用某插件

这个 env 和上面那个不同... 这里的 env 是指，一个 babel 文件针对不同环境（读取 NODE_ENV、BABEL_ENV），做不同配置

{
  "env": {
    "development": {
      "presets": [
        [
          "env",
        ]
      ]
    },
    "production": {
      ...
    }
  }
}

babel-preset-react 已经包含了一组 plugins

但上面这些只是满足基础编译而已，你额外可以添加下面这个 preset 提高 React 应用的性能

npm i babel-preset-react-optimize

项目主页有详细的说明，简要概括下