Babel中关于Present，Plugin，Stage-x的区别及联系

首先先看一个配置文件.babelrc

{
    "presets": [
	    "env"
        "react",
        "stage-0",
    ],
    "plugins": [
        ["import", { "libraryName": "antd", "style": "css" }],
        "transform-runtime", // 转译JS最新的api
		"transform-decorators-legacy", // 转译es7的@修饰器
    ]
}

以上是我个人项目中babel的配置项，接下来我们来详细说一下它们之间的区别和联系

Plugin(插件)

插件就是在代码运行时所需要的用来将ES2015+的JS语法转换为ES5的语法。
实际上Preset和Stage也是归属于Plugin中的。
举个🌰：如果你需要转换ES2015(ES6)的语法，你需要在.babelrc文件中按需引入check-es2015-constants、es2015-arrow-functions、es2015-block-scoped-functions等等几十个不同作用的plugin就行了

// .babelrc
{
  "plugins": [
    "check-es2015-constants",
    "es2015-arrow-functions",
    "es2015-block-scoped-functions",
    // ...
  ]
}

但是Babel团队为了方便，将同属ES2015的几十个Transform Plugins集合到babel-preset-es2015一个Preset中，这样你只需要在.babelrc的presets加入es2015一个配置就可以完成全部ES2015语法的支持了，如下

// .babelrc
{
	"presents": ["es2015"]
}

另外官网也给出了Plugins和Presets的配置项，点击此处查看

以上内容部分参考：点击这里

Present(预设)

在之前的Plugin中已经提到过了，Present可以称为是一些功能的Plugins的集合，用的比较多的Presets如下

// .babelrc
{
	"preset": [
	    "env",
		"es2015",
		"es2016",
		"es2017",
		"stage-0",
		"stage-1",
		"stage-2",
		"stage-3",
		"react"
	]
}

官网这里有详细的说明

接下来说一下这些presets的作用

es2015+ 是Babel官方推出的用来转译已经进入标准的es2015+的语法。
进入标准该怎么理解呢 就是说一群ES标准制定的人经过好几次开会，讨论允许使哪些新的语法进入ES2015+标准，据我现在所知常用的es2015+语法且没有进入标准的例如：

• @修饰器语法
• …拓展运算符
• 箭头函数
• …

先说进入标准的通过使用presets"es2015", "es2016", "es2017",即可但是npm install安装的时候才发现

上面提示说presetes2015, es2016, es2017已经被Babel官方给废弃掉了。官方推荐使用babel-preset-env

引用Babel官网的一句话

在没有任何配置选项的情况下，babel-preset-env 与 babel-preset-latest（或者babel-preset-es2015，babel-preset-es2016和babel-preset-es2017一起）的行为完全相同

即：

// .babelrc
{
	presets: [
		"es2015",
		"es2016",
		"es2017"
	]
}
等同于
.babelrc
{
	"presets": [
		"env"
	]
}

是不是很方便只需要使用env一个就可以替换掉很多复杂的配置，更多配置详见官网配置

Stage-x(阶段)

stage-x和上面的es2015等有些类似，但是它是按照JavaScript的提案阶段区分的，一共有5个阶段。而数字越小，阶段越靠后，存在依赖关系。也就是说stage-0是包括stage-1的

stage-4

已完成的提案，与年度发布的release有关，包含2015年到明年正式发布的内容。例如，现在是2016年，stage-4应该是包括es2015，es2016，es2017。经过测试，babel-preset-stage-4这个npm包是不存在的，如果你单纯的需要stage-4的相关方法，需要引入es2015~es2017的presets

stage-0/1/2/3

那么stage-0/1/2/3和es2015+的共同点在哪里呢？
stage-x是按照阶段提出来的，到了某一个阶段之后提出一些新的特性有些进入了ECMA Script的标准，所以就被Babel团队加入到了es2015+也就是babel-perset-env中了，但是有些还没有进入标准，例如上面提到的@修饰器, ...拓展运算符, 箭头函数等。
既然babel-preset-env的预设中没有这些内容，那么我们只能在.babelrc的配置文件中引入stage-x如

// .babelrc
{
	"presets": [
		"env",
		"stage-0"
	]
}

如果引入的预设stage-x过大的话，可以在预设中去掉stage-x转而在Plugin中加入不支持的语法，如：

// .babelrc
{
	"presets": [
		"env",
	],
	"plugin": [
		"transform-decorators-legacy", // 转译@修饰器
		"transform-object-rest-spread" // 转译...拓展运算符
		”transform-arrow-functions“    // 转译箭头函数
	]
}

stage-x的参数列表 请参考

该文章参考链接如下：

1. 如何写好.babelrc
2. 关于Babel配置项的这点事