关于babel的.babelrc配置

[muwoo]

一个基本的.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 的顺序则刚好相反(从最后一个逆序执行)。