一、配置文件
几乎所有的前端工程师都知道可以用babel将es6+的语法转换为es5,转换工具要么使用babel-cli,要么使用webpack的babel-loader,不管使用哪种转换工具,通常都需要一个配置文件来建立转换规则(也可以在webpack的babel-loader的配置项,原理都一样)。
babel执行时默认从当前目录查找配置文件,支持的配置文件格式有:.babelrc,.babelrc.js,babel.config.js和package.json。它们的配置项都是相同,作用也是一样的,只需要选择其中一种,推荐使用.js结尾的文件,这样可以在配置文件中进行编程控制,如下:
module.exports = function (api) {
api.cache(true);
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}
也可以直接使用module.exports = {},没有必要一定是一个function。
在编写配置文件中,最主要的就是设置plugins(插件)和presets(预设),每个插件或预设都是一个npm包,插件和预设会在编译过程中把我们的ES6+代码转换成ES5。
二、插件和预设的关系
babel中的插件太多,以es2015为例:
- @babel/plugin-transform-arrow-functions
- @babel/plugin-transform-block-scoped-functions
- @babel/plugin-transform-block-scoping
- ....
如果只采用插件的话,我们需要配置非常多的插件数组,如果项目使用了es2016又得增加一堆,而且我们压根也记不住哪个es版本里该使用哪些插件。
preset就是解决这个问题的,它是一系列插件的集合,以@babel/preset-env为例,假设项目中安装的npm包版本是2020年1月发布的,那么这个预设里包含了2020年1月以前所有进入到stage4阶段的语法转换插件。
可能有小伙伴会问,假如我设置了一个语法插件,但指定的某个预设里也包含了该插件,此时会发生什么?这就涉及到插件和预设的执行顺序了,具体的规则如下:
- 插件比预设先执行
- 插件执行顺序是插件数组从前向后执行
- 预设执行顺序是预设数组从后向前执行
三、插件和预设的参数
不配置参数的情况下,每个插件或预设都是数组中的一个字符串成员,例:preset:["@babel/preset-env","@babel/preset-react"],如果某个插件或预设需要配置参数,成员项就需要由字符串换成一个数组,数组的第一项是插件或预设的名称字符串,第二项为对象,该对象用来设置插件或预设的参数,格式如下:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
四、插件和预设的简写
插件或可以在配置文件里用简写名称,如果插件的npm包名称的前缀为 babel-plugin-,可以省略前缀。例如"plugins": ["babel-plugin-transform-decorators-legacy"]可以简写为"plugins": ["transform-decorators-legacy"]。
如果npm包名称的前缀带有作用域@,例如@scope/babel-plugin-xxx,短名称可以写成@scope/xxx。
到babel7版本时,官方的插件大多采用@babel/plugin-xxx格式的,没有明确说明是否可以省略@babel/plugin-,遇到这中npm包时,最好还是采用全称写法比较稳妥。
预设的短名称规则跟插件差不多,前缀为babel-preset-或带有作用域的包@scope/babel-preset-xxx的可以省略掉babel-preset-。
babel7里@babel/preset-前缀开头的包,例如@babel/preset-env的短名称是@babel/env,官方并没有给出明确说明以@babel/preset-xxx卡头的包是否都可以采用简写,因此最好还是采用全称。
五、混乱的babel6预设
如果直接接触babel7的前端同事都知道es预设直接用@babel/preset-env就行了,但是如果要维护和迭代基于babel6的项目呢?各个项目中使用的可能都不一样,babel-preset-es20xx、babel-preset-stage-x、babel-preset-latest这些预设是啥意思?
babel-preset-es20xx: TC39每年发布的、进入标准的ES语法转换器预设,最后一个预设是babel-preset-es2017,不再更新。
babel-preset-stage-x: TC39每年草案阶段的ES语法转换器预设。x的值是0到3,babel7时已废弃,不再更新。
babel-preset-latest: TC39每年发布的、进入标准的ES语法转换器预设。在babel6时等于babel-preset-es2015、babel-preset-es2016、babel-preset-es2017。该包从 v2 开始,需要@babel/core@^7.0.0,也就是需要babel7才能使用,既然要升级到babel7,不如使用更加强大的@babel/preset-env。