Babel 配置工程师应知应会

Babel

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

Babel 各个 package 的用途

  • babel-core
    : 核心部分
  • babel-cli
    : 允许使用命令行
  • babel-node
    : babel-node 直接执行 es6/jsx 文件,自动加载 polyfill
  • 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 放到模块顶部。如果编译多个文件,就会重复引用,导致每个模块都定义一份。

polyfill 相关

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

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

  • babel-polyfill 优点是 全面
    ,反过来说就是 污染原生
    、增大体积
  • transform-runtime 优点是按需,纯净,不会污染原生,但会拖慢编译速度

stage

  • stage-x 是会根据 tc39 动态调整的
  • stage-0 > stage-1 > stage-2 > stage-3
    比如你引入了 stage-1,自动包含了 stage-2 和 stage-3

一般化的 Babel 配置

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

babel-preset-env

  • 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 和上面那个不同… 这里的 env 是指,一个 babel 文件针对不同环境(读取 NODE_ENV
BABEL_ENV
),做不同配置

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

好用的 plugins 和 presets

  • babel-plugin-transform-remove-console

    生产时,代码中应该不包含 console.log。
  • babel-plugin-transform-decorators-legacy

    装饰器
  • babel-preset-minify

    用于生产时压缩代码,包括前述的 remove-console。但是没有 uglify 牛逼。

React 相关

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

  • preset-flow
    : 编译 flow
  • syntax-jsx
    : 识别 jsx 语法
  • transform-react-jsx
    : 编译 jsx
  • transform-react-display-name
    : 自动添加组件的 displayName

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

npm i babel-preset-react-optimize

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

  • transform-react-constant-elements

    识别并转换可以转成常量的组件
  • transform-react-remove-prop-types

    删除 propTypes
  • transform-react-pure-class-to-function

    尽可能把 class 组件转为 functional 组件

References

SegmentFault稿源:SegmentFault (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Babel 配置工程师应知应会

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录