Presets
不想自己设置插件?没问题!Presets 可以像一组 Babel 插件那样操作甚至可共享options
配置。
官方 Presets
我们为常见环境组装了一些 presets :
在 npm 上有许多其他社区维护的 presets 可用!
Stage-X (试验性 Presets)
Stage-x presets 中的任何转换都是针对未发布的 Javascript 特性(如 ES6 / ES2015)的更改。
可调整的改变
这些提案可能会有所变化,因此请谨慎使用,特别是对于第3阶段之前的提案。我们计划在每次 TC39 会议后尽快更新变化到 stage-x presets。
TC39 将提案分为以下阶段:
- Stage 0 - 稻草人: 只是个想法可能会有相关的 Babel 插件。
- Stage 1 - 提议: 值得深入。
- Stage 2 - 草稿: 初始规范。
- Stage 3 - 候选: 完整的规范和初始浏览器实现。
- Stage 4 - 结束: 将被添加到下一个年度版本中。
有关更多信息,请务必查看最新 TC39 提案及其进程文档。
Yehuda Katz(@wycatz)在 thefeedbackloop.xyz 的几篇文章中详细解释了 TC39 阶段过程:Stage 0 and 1, Stage 2, Stage 3。
创建 Preset
只需要导出一个配置,就可以创建自己的 preset。
它只是返回一个插件数组而已...
module.exports = function() {
return {
plugins: [
"pluginA",
"pluginB",
"pluginC",
]
};
}
Presets 可以包含其他的 presets 以及带有选项的插件。
module.exports = () => ({
presets: [
require("@babel/preset-env"),
],
plugins: [
[require("@babel/plugin-proposal-class-properties"), { loose: true }],
require("@babel/plugin-proposal-object-rest-spread"),
],
});
有关更多信息,请查看 babel handbook 部分。
Preset 路径
如果 preset 在 npm 上,你可以传入预设名称,babel 将检查它是否已安装在 node_modules
中
{
"presets": ["babel-preset-myPreset"]
}
还可以指定 presets 的相对/绝对路径。
{
"presets": ["./myProject/myPreset"]
}
Preset 简写
如果包的名称以 babel-preset-
为前缀,可以使用简写:
{
"presets": [
"myPreset",
"babel-preset-myPreset" // 等同
]
}
这也适用于 scoped 包:
{
"presets": [
"@org/babel-preset-name",
"@org/name" // 等同
]
}
Preset 顺序
Preset 的顺序是相反的(从最后一个到第一个).
{
"presets": [
"a",
"b",
"c"
]
}
将会按照以下顺序运行:c
, b
, 然后 a
。
这主要是为了确保向后兼容性,因为大多数用户在“stage-0”之前列出了“es2015”。
Preset 选项
插件和 presets 都可以通过将名称和选项对象放在配置中的数组中来指定选项。
对于不指定选项,这些都是等同的:
{
"presets": [
"presetA",
["presetA"],
["presetA", {}],
]
}
要指定选项,请使用选项名称作为 key 传递对象。
{
"presets": [
["@babel/preset-env", {
"loose": true,
"modules": false
}]
]
}