Babel Preset 详解

我们在转换代码时,可能会用到很多其他的 ES2015+ 的特性,此时,为了避免一个一个的添加插件,我们可以使用preset,这是一个预先确定的插件集。

就像使用插件一样,你也可以创建自己的 Preset 来共享你需要的任何插件组合。

不想组装自己的插件集?没问题! Preset 可以作为一个 Babel 插件数组,甚至一个可共享的选项配置。

对于我们这里的用例,有一个非常好的 Preset 名为env

1
2
3
npm install --save-dev @babel/preset-env

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

没有任何配置的情况下,该preset会包含所有的插件来支持现代化 JavaScript (ES2015,ES2016,…)。当然,Preset 也可以配置选项。除了从命令行同时传递clipreset选项,我们可以使用配置文件传递配置选项。

配置 Preset

创建一个包含以下内容的babel.config.js文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const 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
9
module.exports = function() {
return {
plugins: [
"pluginA",
"pluginB",
"pluginC",
]
};
}

Preset 可以包含其他的 Preset 和带选项的插件:

1
2
3
4
5
6
7
8
9
module.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
2
3
4
5
6
{
"presets": [
"@org/babel-preset-name",
"@org/name" // equivalent
]
}

Preset 排序

Preset 的排序是逆向的,从最后一个到第一个。

1
2
3
4
5
6
7
{
"presets": [
"a",
"b",
"c"
]
}

将会按cba的顺序运行。

-------------本文结束感谢您的阅读-------------
0%