首先先看一个配置文件.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的参数列表 请参考
该文章参考链接如下：
- 如何写好.babelrc
- 关于Babel配置项的这点事
PS：以下是我的个人博客小站，欢迎关注哦
戳我戳我