Babel 配置工程师应知应会

时间 2019-11-07

标签 babel 配置工程师繁體版

原文原文链接

Babel

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

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

// 如下至关于 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-polyfillnode

基本都是使用 preset-env + 几个 stage，通常来讲到 stage-2 就能够了。react

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），作不一样配置webpack

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

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

但上面这些只是知足基础编译而已，你额外能够添加下面这个 preset 提升 React 应用的性能es6

npm i babel-preset-react-optimize

项目主页有详细的说明，简要归纳下github