预设(Presets)


不想自己动手组合插件?没问题!preset 可以作为 Babel 插件的组合,甚至可以作为可以共享的 options 配置。

官方 Preset

我们已经针对常用环境编写了一些 preset:

许多由社区维护的 preset 可以从 npm 上获取!

Stage-X (实验性质的 Presets)

stage-x preset 中的语法转换会随着被批准为 JavaScript 新版本的组成部分而进行相应的改变(例如 ES6/ES2015)。

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

Subject to change

这些提案可能会有变化,因此,特别是处于 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 1Stage 2Stage 3

创建 Preset

如需创建一个自己的 preset,只需导出一份配置即可。

可以是返回一个插件数组…

 js
module.exports = function() {
  return {
    plugins: [
      "pluginA",
      "pluginB",
      "pluginC",
    ]
  };
}

preset 可以包含其他的 preset,以及带有参数的插件。

 js
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 目录下了

 json
{
  "presets": ["babel-preset-myPreset"]
}

你还可以指定指向 preset 的绝对或相对路径。

 json
{
  "presets": ["./myProject/myPreset"]
}

Preset 的短名称

如果 preset 名称的前缀为 babel-preset-,你还可以使用它的短名称:

 js
{
  "presets": [
    "myPreset",
    "babel-preset-myPreset" // equivalent
  ]
}

这也适用于带有冠名(scope)的 preset:

 js
{
  "presets": [
    "@org/babel-preset-name",
    "@org/name" // equivalent
  ]
}

Preset 的排列顺序

Preset 是逆序排列的(从后往前)。

 json
{
  "presets": [
    "a",
    "b",
    "c"
  ]
}

将按如下顺序执行: cb 然后是 a

这主要是为了确保向后兼容,由于大多数用户将 "es2015" 放在 "stage-0" 之前。

Preset 的参数

插件和 preset 都可以接受参数,参数由插件名和参数对象组成一个数组,可以在配置文件中设置。

如果不指定参数,下面这几种形式都是一样的:

 json
{
  "presets": [
    "presetA",
    ["presetA"],
    ["presetA", {}],
  ]
}

要指定参数,请传递一个以参数名作为键(key)的对象。

 json
{
  "presets": [
    ["@babel/preset-env", {
      "loose": true,
      "modules": false
    }]
  ]
}

← 插件附加说明 →

来源:Js中文网 – 前端进阶资源教程
链接:https://www.javascriptc.com/docs/babel-manual/presets

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界