Babel 預(yù)設(shè)（Presets）

Babel 的預(yù)設(shè)（preset）可以被看作是一組 Babel 插件和/或 options 配置的可共享模塊。

官方提供的預(yù)設(shè)?

我們已經(jīng)針對(duì)常用環(huán)境編寫了一些預(yù)設(shè)（preset）：

• @babel/preset-env for compiling ES2015+ syntax
• @babel/preset-typescript for TypeScript
• @babel/preset-react for React
• @babel/preset-flow for Flow

Other Integrations?

If you aren't using Babel directly, the framework you are using may have its own configuration for you to use or extend. Many other community maintained presets are available on npm!

Next.js | Nuxt.js | Parcel | Jest | Gatsby

Using a Preset?

Within a Babel config, if the preset is on npm, you can pass in the name of the preset and Babel will check that it's installed in already. This is added to the  presets config option, which takes an array.node_modules

babel.config.json

{
  "presets": ["babel-preset-myPreset", "@babel/preset-env"]
}

Otherwise, you can also specify a relative or absolute path to your presets.

babel.config.json

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

See name normalization for more specifics on configuring the path of a plugin or preset.

Stage-X（實(shí)驗(yàn)性質(zhì)的預(yù)設(shè)）?

DEPRECATED

As of Babel 7, we've decided to deprecate the Stage-X presets and stop publishing them. Because these proposals are inherently subject to change, it seems better to ask users to specify individual proposals as plugins vs. a catch all preset that you would need to check up on anyway. Check out our blog for more context.

Any transforms in stage-x presets are changes to the language that haven't been approved to be part of a release of JavaScript (such as ES6/ES2015).

TC39 將提案分為以下幾個(gè)階段：

• Stage 0 - 設(shè)想（Strawman）：只是一個(gè)想法，可能有 Babel插件。
• Stage 1 - 建議（Proposal）：這是值得跟進(jìn)的。
• Stage 2 - 草案（Draft）：初始規(guī)范。
• Stage 3 - 候選（Candidate）：完成規(guī)范并在瀏覽器上初步實(shí)現(xiàn)。
• Stage 4 - 完成（Finished）：將添加到下一個(gè)年度版本發(fā)布中。

有關(guān)詳細(xì)信息，請(qǐng)務(wù)必查看 current TC39 proposals 及其 process document。

TC39 各階段的流程也在一些文章中有詳細(xì)的解釋，在 Yehuda Katz (@wycatz) 的 thefeedbackloop.xyz網(wǎng)站上：Stage 0 and 1、 Stage 2、Stage 3

創(chuàng)建預(yù)設(shè)?

如需創(chuàng)建一個(gè)自己的預(yù)設(shè)（無(wú)論是為了本地使用還是發(fā)布到 npm），需要導(dǎo)出（export）一個(gè)配置對(duì)象。

可以是返回一個(gè)插件數(shù)組...

JavaScript

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

preset 可以包含其他的 preset，以及帶有參數(shù)的插件。

JavaScript

module.exports = () => ({
  presets: [require("@babel/preset-env")],
  plugins: [
    [require("@babel/plugin-proposal-class-properties"), { loose: true }],
    require("@babel/plugin-proposal-object-rest-spread"),
  ],
});

有關(guān)更多信息，請(qǐng)參考 babel 手冊(cè) 中關(guān)于 preset 的部分。

預(yù)設(shè)的排列順序?

Preset 是逆序排列的（從后往前）。

babel.config.json

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

將按如下順序執(zhí)行： 、 然后是 。cba

這主要是為了確保向后兼容，由于大多數(shù)用戶將 "es2015" 放在 "stage-0" 之前。

預(yù)設(shè)的參數(shù)?

插件和 preset 都可以接受參數(shù)，參數(shù)由插件名和參數(shù)對(duì)象組成一個(gè)數(shù)組，可以在配置文件中設(shè)置。

如果不指定參數(shù)，下面這幾種形式都是一樣的：

babel.config.json

{
  "presets": [
    "presetA", // bare string
    ["presetA"], // wrapped in array
    ["presetA", {}] // 2nd argument is an empty options object
  ]
}

要指定參數(shù)，請(qǐng)傳遞一個(gè)以參數(shù)名作為鍵（key）的對(duì)象。

babel.config.json

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