我们在转换代码时,可能会用到很多其他的 ES2015+ 的特性,此时,为了避免一个一个的添加插件,我们可以使用preset
,这是一个预先确定的插件集。
就像使用插件一样,你也可以创建自己的 Preset 来共享你需要的任何插件组合。
不想组装自己的插件集?没问题! Preset 可以作为一个 Babel 插件数组,甚至一个可共享的选项配置。
对于我们这里的用例,有一个非常好的 Preset 名为env
。
1 | npm install --save-dev @babel/preset-env |
没有任何配置的情况下,该preset
会包含所有的插件来支持现代化 JavaScript (ES2015,ES2016,…)。当然,Preset 也可以配置选项。除了从命令行同时传递cli
和preset
选项,我们可以使用配置文件传递配置选项。
配置 Preset
创建一个包含以下内容的babel.config.js
文件:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
},
],
];
module.exports = { presets };
现在,env
Preset 只会加载我们指定的浏览器不包含的一些特性的转换插件。
官方 Presets
官方为常见的环境组装了一些:
许多其他社区维护的 Preset 在 npm 上可用!
stage-X (实验性 Preset)
stage-x Presets 中的任何转换都是对尚未被批准作为 Javascript 版本(如 ES6/ES2015)的一部分的语言的更改。
这些提议可能会改变,所以使用时要格外小心,尤其是对于任何准备阶段3的项目。我们计划在每次 TC39 会议后,当提案改变时,更新 stage-x 预设。
TC39 将提议分为以下阶段:
- Stage 0 - Strawman: 只是一个想法,可能是 Babel 插件
- Stage 1 - Proposal: 这是值得努力的
- Stage 2 - Draft: 最初的规范
- Stage 3 - Candidate: 完整的规范和最初的浏览器实现
- Stage 4 - Finished: 将添加到下一个年度版本
创建一个 Preset
创建你自己的 Preset,只需要导出一个配置,返回一个插件的数组:1
2
3
4
5
6
7
8
9module.exports = function() {
return {
plugins: [
"pluginA",
"pluginB",
"pluginC",
]
};
}
Preset 可以包含其他的 Preset 和带选项的插件:1
2
3
4
5
6
7
8
9module.exports = () => ({
presets: [
require("@babel/preset-env"),
],
plugins: [
[require("@babel/plugin-proposal-class-properties"), { loose: true }],
require("@babel/plugin-proposal-object-rest-spread"),
],
});
Preset 路径
如果在 npm 上,你可以传入 Preset 的名称,Babel 将检查它是否安装在 node_modules
中:1
2
3{
"presets": ["babel-preset-myPreset"]
}
也可以指定 Preset 的相对路径或绝对路径:1
2
3{
"presets": ["./myProject/myPreset"]
}
Preset 缩写
如果包名的前缀为babel-preset-
,可以使用缩写:1
2
3
4
5
6{
"presets": [
"myPreset",
"babel-preset-myPreset" // equivalent
]
}
1 | { |
Preset 排序
Preset 的排序是逆向的,从最后一个到第一个。1
2
3
4
5
6
7{
"presets": [
"a",
"b",
"c"
]
}
将会按c
,b
,a
的顺序运行。