关于babel的.babelrc配置
muwoo opened this issue · comments
一个基本的.babelrc
配置可能是这样的:
{
"presets": [
"env",
"stage-0"
],
"plugins": ["transform-runtime"]
}
presets env
presets 是babel的一个预设,使用的时候需要安装对应的插件,对应babel-preset-xxx,例如下面的配置,需要npm install babel-preset-env
{
"presets": ["env"]
}
每年每个 preset 只编译当年批准的内容。 而 babel-preset-env 相当于 es2015 ,es2016 ,es2017 及最新版本。
presets stage
stage 代表着ES提案的各个阶段,一共有5个阶段,存在依赖关系。也就是说stage-0是包括stage-1的,以此类推:
- Stage 0 - 稻草人: 只是一个想法,可能是 babel 插件。
- Stage 1 - 提案: 初步尝试。
- Stage 2 - 初稿: 完成初步规范。
- Stage 3 - 候选: 完成规范和浏览器初步实现。
- Stage 4 - 完成: 将被添加到下一年度发布。
plugins
其实看了上面的应该也明白了,presets,也就是一堆plugins的预设,起到方便的作用。如果你不采用presets,完全可以单独引入某个功能,比如以下的设置就会引入编译箭头函数的功能。
{
"plugins": ["transform-es2015-arrow-functions"]
}
如果你要引入ES6 的所有特性,那么这样一个个写实在是太麻烦了,我们可以预设支持ES6的特性:babel-preset-es2015
关于transform-runtime
可以参考这里
自定义预设或插件
Babel支持自定义的预设(presets)或插件(plugins)。如果你的插件在npm上,可以直接采用这种方式"plugins": ["babel-plugin-myPlugin"]
,当然,你也可以缩写,它和"plugins": ["myPlugin"]
是等价的。此外,你还可以采用本地的相对路径引入插件,比如"plugins": ["./node_modules/asdf/plugin"]
。
presets同理。
plugins/presets排序
插件中每个访问者都有排序问题。
这意味着如果两次转译都访问相同的”程序”节点,则转译将按照 plugin 或 preset 的规则进行排序然后执行。
- Plugin 会运行在 Preset 之前。
- Plugin 会从第一个开始顺序执行。ordering is first to last.
- Preset 的顺序则刚好相反(从最后一个逆序执行)。