Babel配置中的presets、plugins、各个阶段stage的含义

什么是Babel

Babel 官方文档: https://babeljs.io/

Babel 中文文档：https://www.babeljs.cn/

我们知道各个浏览器对JavaScript版本的支持各不相同，很多新的语法无法直接在浏览器中运行，为了解决这个“沟通不畅”的问题，所以就有了Babel，Babel主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。有了Babel，我们可以肆无忌惮的使用ES6+的语法。

如何配置babel

// .babelrc文件
{
    "presets": [
        "es2015"，
        "react",
        "stage-0"
    ],
    "plugins": []
}

这个配置文件是针对babel6的，babel6做了一系列模块化，不像babel5一样把所有的内容都加载。

比如要编译es6，我们需要设置presets包含"es2015"，即预先加载es6编译的模块；

如果需要编译jsx，我们需要设置presets包含"react"，即预先加载react编译的模块；

presets：预设，即一组预先设定的插件，是babel插件的组合

presets与plugins同时存在的执行顺序

1. plugins运行在presets之前；

2. plugins配置项，按照声明顺序执行，从第一个到最后一个；

3. presets配置项，按照声明逆序执行，从最后一个到第一个（主要是为了确保向后兼容）

stage-x：指处于某一阶段的js语言提案

• Stage 0 - 设想（Strawman）：只是一个想法，可能有 Babel插件。
• Stage 1 - 建议（Proposal）：这是值得跟进的。
• Stage 2 - 草案（Draft）：初始规范。
• Stage 3 - 候选（Candidate）：完成规范并在浏览器上初步实现。
• Stage 4 - 完成（Finished）：将添加到下一个年度版本发布中。

stage-x的参数列表请参考：https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md

!!! babel7的一些变化：

babel7中删除了"stage-x"的预设；

建议使用env，代替 es2015、es2016、es2017预设

更多详情请查阅 https://www.babeljs.cn/blog/2018/08/27/7.0.0