メインコンテンツへスキップ

@babel/plugin-transform-modules-umd

履歴
バージョン変更点
v7.14.0importInterop オプションを実装
情報

このプラグインは、modules オプションの下で@babel/preset-envに含まれています。

このプラグインは、ES2015 モジュールをUMDに変換します。 Babel は ES2015 モジュールと UMD の実装間の異なる解決アルゴリズムを認識していないため、import/export 文 (import "./mod.js") の *構文* だけが変換されることに注意してください。

⚠️ このプラグインは動的 import (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.es6Promiseではなくglobal.Promiseとして公開されます。これは次のように対応できます。

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

デフォルトのセマンティクス​

デフォルトのセマンティクスには、いくつかの注意点があります。

第一に、この変換は、UMD 出力でのグローバル名の生成に、各 import のbasenameを使用します。つまり、次のように、同じ basename を持つ複数のモジュールをインポートする場合、

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

同じブラウザグローバルへの2つの参照に変換されます。

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

プラグインオプションを次のように設定した場合、

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

それでも両方とも1つのブラウザグローバルに変換されます。

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

これは、変換が import の basename だけを使用しているためです。

第二に、指定されたオーバーライドは、babel-types/src/convertersのtoIdentifier関数に渡されます。つまり、次のようにメンバ式としてオーバーライドを指定した場合、

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

factory(global.fizz.buzz)には変換されません。代わりに、toIdentifier内のロジックに基づいて、factory(global.fizzBuzz)に変換されます。

第三に、エクスポートされたグローバル名をオーバーライドすることはできません。

exactGlobals: trueによるより柔軟なセマンティクス​

これらの動作はすべて、globalsマップの柔軟性を制限する可能性があります。これらの制限を解除するには、exactGlobalsオプションをtrueに設定します。これにより、プラグインは

  1. グローバル名の生成時に、常にbasenameの代わりに完全なimport文字列を使用します。
  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 を介して​

シェル
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: string) => string

追加日: v7.9.0

Babel によって生成されたモジュール名を与え、使用する名前を返します。偽の値を返すと、元のnameが使用されます。

moduleRoot​

文字列

追加日: v7.9.0

生成されたモジュール名に含めるルートパス。

ここにリストされていないオプションについては、@babel/plugin-transform-modules-commonjsのオプションを参照してください。