預設

Babel 預設可以作為可共用的 Babel 外掛和/或設定 選項。

官方預設值

我們為常見的環境組裝了一些預設值

其他整合

如果您沒有直接使用 Babel，您使用的框架可能會有自己的組態供您使用或擴充。許多其他社群維護的預設值都可以在 npm 上取得！

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

使用預設值

在 Babel 組態中，如果預設值在 npm 上，您可以傳入預設值的名稱，而 Babel 會檢查它是否已安裝在 node_modules 中。這會新增至 presets 組態選項，它會採用陣列。

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

否則，您也可以指定相對或絕對路徑至您的預設值。

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

請參閱名稱正規化以取得關於組態外掛程式或預設值路徑的更多具體資訊。

Stage-X（實驗性預設值）

已棄用

從 Babel 7 開始，我們決定棄用 Stage-X 預設值，並停止發布它們。由於這些提案本質上容易變更，因此要求使用者將個別提案指定為外掛，而不是一個你無論如何都需要檢查的通用預設值，似乎會更好。查看我們的部落格以取得更多背景資訊。

stage-x 預設值中的任何轉換都是語言的變更，尚未核准成為 JavaScript 發行版本的一部分（例如 ES6/ES2015）。

TC39 將提案分類為以下階段

階段 0 - 稻草人：只是一個想法，可能是 Babel 外掛。
階段 1 - 提案：這值得努力。
階段 2 - 草稿：初始規格。
階段 3 - 候選：完整的規格和初始瀏覽器實作。
階段 4 - 已完成：將新增至下一年的年度發行版本。

如需更多資訊，務必查看目前的 TC39 提案及其程序文件。

TC39 階段流程也由 Yehuda Katz (@wycatz) 在 thefeedbackloop.xyz 中的幾篇文章中詳細說明：階段 0 和 1，階段 2，階段 3

建立預設值

若要建立自己的預設值（供本地使用或 npm），您需要匯出設定檔物件。

它可以只傳回外掛程式陣列。

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

預設值可以包含其他預設值，以及具有選項的外掛程式。

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

如需更多資訊，請查看 babel 手冊中關於預設值的章節。

預設值排序

預設值排序是反向的（由最後到第一個）。

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

將按以下順序執行：c、b，然後是 a。

這主要是為了確保向後相容性，因為大多數使用者會在「stage-0」之前列出「es2015」。

預設值選項

外掛程式和預設值都可以透過在設定檔中將名稱和選項物件包裝在陣列中，來指定選項。

對於不指定任何選項，這些都是等效的

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

若要指定選項，請傳遞一個物件，其金鑰為選項名稱。

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

官方預設值​

其他整合​

使用預設值​

Stage-X（實驗性預設值）​

建立預設值​

預設值排序​

預設值選項​