Babel 预设(Presets)
preset 可以作为 Babel 插件的组合,甚至可以作为可以共享的 options 配置。
官方 Preset
一些常用环境 preset 可以从 npm 上获取!
Stage-X (实验性质的 Presets)
stage-x preset 中的任何语法转换都是对语言本身的更改,而这些更改尚未被纳入 JavaScript 标准(例如 ES6/ES2015)。
随时可能更改
这些提案可能会有变化,因此,特别是处于 stage-3 之前的任何提案,请务必谨慎使用。我们计划在每次 TC39 会议之后,如果有可能,在提案变更时更新 stage-x 的 preset。
TC39 将提案分为以下几个阶段:
Stage 0 - 设想(Strawman):只是一个想法,可能有 Babel插件。
Stage 1 - 建议(Proposal):这是值得跟进的。
Stage 2 - 草案(Draft):初始规范。
Stage 3 - 候选(Candidate):完成规范并在浏览器上初步实现。
Stage 4 - 完成(Finished):将添加到下一个年度版本发布中。
有关详细信息,请务必查看 current TC39 proposals 及其 process document。
TC39 各阶段的流程也在一些文章中有详细的解释,在 Yehuda Katz (@wycatz) 的 thefeedbackloop.xyz网站上:Stage 0 and 1、Stage 2、Stage 3
创建 Preset
如需创建一个自己的 preset,只需导出一份配置即可。
可以是返回一个插件数组。
module.exports = function() { return { plugins: [ "pluginA", "pluginB", "pluginC", ] }; }
preset 可以包含其他的 preset,以及带有参数的插件。
module.exports = () => ({ presets: [ require("@babel/preset-env"), ], plugins: [ [require("@babel/plugin-proposal-class-properties"), { loose: true }], require("@babel/plugin-proposal-object-rest-spread"), ], });
有关更多信息,请参考 babel 手册 中关于 preset 的部分。
Preset 的路径
如果 preset 在 npm 上,你可以输入 preset 的名称,babel 将检查是否已经将其安装到 node_modules 目录下了
{ "presets": ["babel-preset-myPreset"] }
你还可以指定指向 preset 的绝对或相对路径。
{ "presets": ["./myProject/myPreset"] }
Preset 的短名称
如果 preset 名称的前缀为 babel-preset-,你还可以使用它的短名称:
{ "presets": [ "myPreset", "babel-preset-myPreset" // equivalent ] }
这也适用于带有冠名(scope)的 preset:
{ "presets": [ "@org/babel-preset-name", "@org/name" // equivalent ] }
Preset 的排列顺序
Preset 是逆序排列的(从后往前)。
{ "presets": [ "a", "b", "c" ] }
将按如下顺序执行: c、b 然后是 a。
这主要是为了确保向后兼容,由于大多数用户将 "es2015" 放在 "stage-0" 之前。
Preset 的参数
插件和 preset 都可以接受参数,参数由插件名和参数对象组成一个数组,可以在配置文件中设置。
如果不指定参数,下面这几种形式都是一样的:
{ "presets": [ "presetA", ["presetA"], ["presetA", {}], ] }
要指定参数,请传递一个以参数名作为键(key)的对象。
{ "presets": [ ["@babel/preset-env", { "loose": true, "modules": false }] ] }