@babel/plugin-proposal-dynamic-import

情報

このプラグインは、ES2020で`@babel/preset-env`に含まれています。

`import()`式を非ESMモジュール形式に変換します。

このプラグインを使う（使わない）場合

Webpack、Rollup、Parcelなどのバンドラーを使用している場合は、このプラグインを使用せず、バンドラーで`import()`式を処理する必要があります。

次の場合にこのプラグインを使用する必要があります。

• ESMでNode.jsライブラリを作成していますが、CommonJS(CJS)で配布したい場合: このプラグインと@babel/plugin-transform-modules-commonjsをインストールします。
• ブラウザでモジュールをロードするためにRequireJSを使用する場合: このプラグインと@babel/plugin-transform-modules-amdをインストールします。
• ブラウザでモジュールをロードするためにSystemJSを使用する場合: このプラグインと@babel/plugin-transform-modules-systemjsをインストールします。

このプラグインは、上記のモジュール変換プラグインのいずれかと一緒に使用する必要があります。

例

input.js

import("jquery").then($ => {});

は、以下に変換されます。

CommonJS

output.js

Promise.resolve()
  .then(() => _interopRequireWildcard(require("jquery")))
  .then(($) => {});

AMD

output.js

define(["require"], function (_require) {
  new Promise((_resolve, _reject) =>
    _require(
      ["jquery"],
      (imported) => _resolve(_interopRequireWildcard(imported)),
      _reject
    )
  ).then(($) => {});
});

SystemJS

output.js

System.register([], function (_export, _context) {
  "use strict";

  return {
    setters: [],
    execute: function () {
      _context.import("jquery").then(($) => {});
    }
  };
});

インストール

npm

npm install --save-dev @babel/plugin-proposal-dynamic-import

Yarn

yarn add --dev @babel/plugin-proposal-dynamic-import

pnpm

pnpm add --save-dev @babel/plugin-proposal-dynamic-import

使用方法

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

babel.config.json

{
  "plugins": [
    "@babel/plugin-proposal-dynamic-import",
    "@babel/plugin-transform-modules-commonjs"
  ]
}

CLI経由

シェル

babel --plugins=@babel/plugin-proposal-dynamic-import,@babel/plugin-transform-modules-amd script.js

Node API経由

JavaScript

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

参考文献

• 提案: import()