跳至主要內容

@babel/plugin-transform-modules-umd

歷史
版本變更
v7.14.0實作 importInterop 選項
資訊

此外掛程式包含在 @babel/preset-env 中的 modules 選項下

此外掛程式將 ES2015 模組轉換為 UMD。請注意，僅轉換 import/export 陳述式的語法（import "./mod.js"），因為 Babel 不知道 ES2015 模組和 UMD 實作之間不同的解析演算法。

⚠️ 此外掛程式不支援動態匯入（import('./lazy.js')）。

範例​

輸入

JavaScript
export default 42;

輸出

JavaScript
(function(global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports);
  } else {
    var mod = {
      exports: {},
    };
    factory(mod.exports);
    global.actual = mod.exports;
  }
})(this, function(exports) {
  "use strict";

  Object.defineProperty(exports, "__esModule", {
    value: true,
  });

  exports.default = 42;
});

安裝​

npm install --save-dev @babel/plugin-transform-modules-umd

用法​

babel.config.json
{
  "plugins": ["@babel/plugin-transform-modules-umd"]
}

當此模組在瀏覽器中執行時，您也可以覆寫特定函式庫的名稱。例如，es6-promise 函式庫會將自己顯示為 global.Promise，而不是 global.es6Promise。這可以使用

babel.config.json
{
  "plugins": [
    [
      "@babel/plugin-transform-modules-umd",
      {
        "globals": {
          "es6-promise": "Promise"
        }
      }
    ]
  ]
}

預設語意​

關於預設語意，有幾件事需要注意。

首先，此轉換使用每個匯入的 基本名稱 來產生 UMD 輸出的全域名稱。這表示如果您匯入具有相同基本名稱的多個模組，例如

JavaScript
import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";

它會轉譯成兩個對應至相同瀏覽器全域的參考

JavaScript
factory(global.fooBar, global.fooBar);

如果您將外掛程式選項設定為

JSON
{
  "globals": {
    "foo-bar": "fooBAR",
    "./mylib/foo-bar": "mylib.fooBar"
  }
}

它仍會將兩者轉譯到一個瀏覽器全域

JavaScript
factory(global.fooBAR, global.fooBAR);

因為轉換再次只使用匯入的基礎名稱。

其次，指定的覆寫仍會傳遞給 babel-types/src/converters 中的 toIdentifier 函數。這表示如果您指定一個覆寫作為成員表達式，例如

JSON
{
  "globals": {
    "fizzbuzz": "fizz.buzz"
  }
}

這不會轉譯為 factory(global.fizz.buzz)。相反地，它會根據 toIdentifier 中的邏輯轉譯為 factory(global.fizzBuzz)。

第三，您無法覆寫匯出的全域名稱。

使用 exactGlobals: true 的更靈活語意​

所有這些行為都會限制 globals 對應的靈活性。若要移除這些限制，您可以將 exactGlobals 選項設定為 true。這麼做會指示外掛程式

  1. 在產生全域名稱時，總是使用完整的匯入字串，而不是基礎名稱
  2. 略過將 globals 覆寫傳遞給 toIdentifier 函數。相反地，它們會完全按照所寫的內容使用，因此如果您沒有使用有效的識別碼或有效的未運算 (點) 成員表達式，您會收到錯誤訊息。
  3. 允許透過 globals 對應覆寫匯出的全域名稱。任何覆寫都必須再次是有效的識別碼或有效的成員表達式。

因此，如果您將 exactGlobals 設定為 true，並且沒有傳遞任何覆寫，第一個範例

JavaScript
import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";

會轉譯為

JavaScript
factory(global.fooBar, global.mylibFooBar);

如果您將外掛程式選項設定為

JSON
{
  "globals": {
    "foo-bar": "fooBAR",
    "./mylib/foo-bar": "mylib.fooBar"
  },
  "exactGlobals": true
}

然後它會轉譯為

JavaScript
factory(global.fooBAR, global.mylib.fooBar);

最後，將外掛程式選項設定為

babel.config.json
{
  "plugins": [
    "@babel/plugin-external-helpers",
    [
      "@babel/plugin-transform-modules-umd",
      {
        "globals": {
          "my/custom/module/name": "My.Custom.Module.Name"
        },
        "exactGlobals": true
      }
    ]
  ],
  "moduleId": "my/custom/module/name"
}

它會轉譯為

JavaScript
factory(mod.exports);
global.My = global.My || {};
global.My.Custom = global.My.Custom || {};
global.My.Custom.Module = global.My.Custom.Module || {};
global.My.Custom.Module.Name = mod.exports;

透過 CLI​

Shell
babel --plugins @babel/plugin-transform-modules-umd script.js

透過 Node API​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-modules-umd"],
});

選項​

moduleIds​

boolean 預設為 !!moduleId

新增於：v7.9.0

啟用模組 ID 產生。

moduleId​

字串

新增於：v7.9.0

用於模組的硬式編碼 ID。無法與 getModuleId 搭配使用。

getModuleId​

(name: 字串) => 字串

新增於：v7.9.0

提供 Babel 產生的模組名稱，回傳要使用的名稱。回傳假值會使用原始的 name。

moduleRoot​

字串

新增於：v7.9.0

要包含在產生的模組名稱中的根路徑。

對於未在此列出的選項，請參閱 @babel/plugin-transform-modules-commonjs 的選項。