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 组件
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。