跳至主要內容

外掛模組

Babel 的程式碼轉換是透過套用外掛模組（或 預設）到您的 設定檔 來啟用的。

使用外掛模組​

如果外掛模組在 npm 上，您可以傳入外掛模組的名稱，而 Babel 將會檢查它是否已安裝在 node_modules 中。這會加入到 外掛模組 設定選項中，它會採用陣列。

babel.config.json
{
  "plugins": ["babel-plugin-myPlugin", "@babel/plugin-transform-runtime"]
}

您也可以指定相對於/絕對的路徑至您的外掛程式。

babel.config.json
{
  "plugins": ["./node_modules/asdf/plugin"]
}

請參閱名稱標準化，以取得更多有關設定外掛程式或預設值路徑的具體資訊。

轉換外掛程式​

這些外掛程式會對您的程式碼套用轉換。

資訊

轉換外掛程式會啟用對應的語法外掛程式，因此您不必同時指定兩者。

語法外掛程式​

Babel 可轉換大部分語法。在較少見的情況下（如果尚未實作轉換，或沒有預設方式可執行此操作），您可以使用外掛程式（例如 @babel/plugin-syntax-bigint）來僅允許 Babel 剖析特定類型的語法。或者您想要保留原始程式碼，因為您只希望 Babel 執行程式碼分析或程式碼模組化。

提示

如果您已使用對應的轉換外掛程式，則不需要指定語法外掛程式，因為它會自動啟用。

或者，您也可以提供 Babel 剖析器的任何外掛程式選項

您的 .babelrc

JSON
{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

外掛程式排序​

外掛程式中每個訪客的排序事宜。

這表示如果兩個轉換都拜訪「程式」節點，這些轉換將會按照外掛程式或預設順序執行。

  • 外掛程式會在預設值之前執行。
  • 外掛程式排序是從第一個到最後一個。
  • 預設值排序是反向的（從最後一個到第一個）。

例如

babel.config.json
{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

將執行 transform-decorators-legacy，然後執行 transform-class-properties。

請務必記住，對於預設值，順序是反向的。下列內容

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

將按照下列順序執行：@babel/preset-react，然後執行 @babel/preset-env。

外掛程式選項​

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

對於不指定選項，以下所有內容都是等效的

babel.config.json
{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

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

babel.config.json
{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

預設值的設定選項運作方式完全相同

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

外掛程式開發​

請參閱極佳的 babel-handbook 以了解如何建立您自己的外掛程式。

反轉名稱的簡單外掛程式（來自首頁）

JavaScript
export default function() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },
  };
}