@babel/plugin-transform-modules-commonjs

履歴

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

情報

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

このプラグインは、ECMAScript モジュールをCommonJSに変換します。Babelは、ECMAScriptモジュールとCommonJSの実装間の異なる解決アルゴリズムを認識していないため、import/export文（import "./mod.js"）とimport式（import('./mod.js')）の構文のみが変換されます。

例

入力

JavaScript

export default 42;

出力

JavaScript

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

exports.default = 42;

インストール

npm

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

Yarn

yarn add --dev @babel/plugin-transform-modules-commonjs

pnpm

pnpm add --save-dev @babel/plugin-transform-modules-commonjs

使用方法

設定ファイルを使用する場合（推奨）

JavaScript

// without options
{
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

// with options
{
  "plugins": [
    ["@babel/plugin-transform-modules-commonjs", {
      "allowTopLevelThis": true
    }]
  ]
}

CLI経由

シェル

babel --plugins @babel/plugin-transform-modules-commonjs script.js

Node API経由

JavaScript

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

オプション

importInterop

"babel" | "node" | "none"、または(specifier: string, requestingFilename: string | undefined) => "babel" | "node" | "none"。デフォルトは"babel"です。

CommonJSモジュールとECMAScriptモジュールは完全に互換性があるわけではありません。しかし、コンパイラ、バンドラ、JavaScriptランタイムは、それらをできる限り連携させるためのさまざまな戦略を開発しました。

このオプションは、Babelが使用するインターオペラビリティ戦略を指定します。関数の場合は、Babelはインポート指定子とインポーターパスを渡して呼び出します。たとえば、import { a } from 'b'を含む/full/path/to/foo.jsファイルをコンパイルする場合、Babelはパラメータ('b', '/full/path/to/foo.js')で呼び出します。

"babel"

babelでエクスポートを使用する場合、非列挙の__esModuleプロパティがエクスポートされます。このプロパティは、インポートがデフォルトエクスポートであるか、デフォルトエクスポートを含むかを判断するために使用されます。

JavaScript

import foo from "foo";
import { bar } from "bar";
foo;
bar;

// Is compiled to ...

"use strict";

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var _foo = _interopRequireDefault(require("foo"));
var _bar = require("bar");

_foo.default;
_bar.bar;

このインポートインターオペラビリティが使用されている場合、インポートされたモジュールとインポーターモジュールの両方がBabelでコンパイルされている場合、どちらもコンパイルされていないかのように動作します。

これはデフォルトの動作です。

"node"

CommonJSファイル（CommonJSで直接記述されたもの、またはコンパイラで生成されたもの）をインポートする場合、Node.jsは常にdefaultエクスポートをmodule.exportsの値にバインドします。

JavaScript

import foo from "foo";
import { bar } from "bar";
foo;
bar;

// Is compiled to ...

"use strict";

var _foo = require("foo");
var _bar = require("bar");

_foo;
_bar.bar;

これはNode.jsが行うことと完全に同じではありません。Babelはmodule.exportsの任意のプロパティを名前付きエクスポートとしてアクセスできますが、Node.jsはmodule.exportsの静的に分析可能なプロパティのみをインポートできます。ただし、Node.jsで動作するインポートは、importInterop: "node"を使用してBabelでコンパイルした場合にも動作します。

"none"

インポートされたファイルが、exports.defaultにデフォルトエクスポートを格納するコンパイラ（Babelなど）で変換されていることがわかっている場合は、_interopRequireDefaultヘルパーを安全に省略できます。

JavaScript

import foo from "foo";
import { bar } from "bar";
foo;
bar;

// Is compiled to ...

"use strict";

var _foo = require("foo");
var _bar = require("bar");

_foo.default;
_bar.bar;

loose

boolean、デフォルトはfalseです。

デフォルトでは、babelでエクスポートを使用する場合、非列挙の__esModuleプロパティがエクスポートされます。

JavaScript

var foo = (exports.foo = 5);

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

注意

最上位レベルのenumerableModuleMeta アサーションへの移行を検討してください。

babel.config.json

{
  "assumptions": {
    "enumerableModuleMeta": true
  }
}

これをサポートしていない環境では、enumerableModuleMetaアサーションを有効にできます。Object.definePropertyを使用する代わりに、代入が使用されます。

JavaScript

var foo = (exports.foo = 5);
exports.__esModule = true;

strict

boolean、デフォルトはfalseです。

デフォルトでは、babelでエクスポートを使用する場合、非列挙の__esModuleプロパティがエクスポートされます。場合によっては、このプロパティを使用して、インポートがデフォルトエクスポートであるか、デフォルトエクスポートを含むかを判断します。

JavaScript

var foo = (exports.foo = 5);

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

__esModuleプロパティのエクスポートを防ぐには、strictオプションをtrueに設定します。

lazy

boolean、Array<string>、または(string) => boolean、デフォルトはfalseです。

コンパイルされたimport文を、インポートされたバインディングが初めて使用されたときに遅延評価されるように変更します。

これにより、依存関係を事前に評価することは完全に不要な場合があるため、モジュールの最初のロード時間を改善できます。これは、ライブラリモジュールを実装する場合に特に当てはまります。

lazyの値には、いくつかの可能な効果があります。

• false - すべてのインポートされたモジュールの遅延初期化はありません。

• true - ローカルの./fooインポートは遅延初期化しませんが、foo依存関係は遅延初期化します。

  ローカルパスは循環依存関係を持つ可能性が高いため、デフォルトでは遅延ロードされません。一方、独立したモジュール間の依存関係はめったに循環しません。

• Array<string> - 指定された文字列のいずれかと一致するソースを持つすべてのインポートを遅延初期化します。

• (string) => boolean - 指定されたソース文字列を遅延ロードするかどうかを決定するために呼び出されるコールバックを渡します。

インポートが遅延できない2つのケースは次のとおりです。

• import "foo";

  副作用インポートは、その存在自体が後で初期化を開始するバインディングがないことを意味するため、自動的に非遅延になります。

• export * from "foo"

  すべての名前を再エクスポートするには、事前に実行する必要があります。それ以外の場合は、エクスポートする必要がある名前を知る方法がありません。

ヒント

プラグインオプションの設定の詳細については、こちらをご覧ください。

noInterop

boolean、デフォルトはfalseです。

注意

非推奨: 代わりにimportInteropオプションを使用してください。

trueに設定されている場合、このオプションはimportInterop: "none"を設定した場合と同じ動作になります。

関連するassumptions

• enumerableModuleMeta
• noIncompleteNsImportDetection