本文へ移動

@babel/plugin-syntax-dynamic-import

情報

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

ヒント

@babel/core 7.8.0以降を使用している場合、Babelの設定からこのプラグインを安全に削除できます。

インストール​

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

使用方法​

babel.config.json
{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

CLI経由​

シェル
babel --plugins @babel/plugin-syntax-dynamic-import script.js

Node API経由​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-syntax-dynamic-import"],
});

Webpackと@babel/preset-envの連携​

現在、`@babel/preset-env`は、Webpackが内部的に`Promise`に依存していることを認識していません。Internet Explorerなど、組み込みの`Promise`サポートがない環境では、`promise`と`iterator`の両方のポリフィルを手動で追加する必要があります。

例えば、`core-js@3`を使用する場合

webpack.config.js
const config = {
  entry: [
    "core-js/modules/es.promise",
    "core-js/modules/es.array.iterator",
    path.resolve(__dirname, "src/main.js"),
  ],
  // ...
};

または

src/main.js
import "core-js/modules/es.promise";
import "core-js/modules/es.array.iterator";

// ...

これは`core-js@2`でも同様ですが、インポートパスが若干異なります。

webpack.config.js
const config = {
  entry: [
    "core-js/modules/es6.promise",
    "core-js/modules/es6.array.iterator",
    path.resolve(__dirname, "src/main.js"),
  ],
  // ...
};

または

src/main.js
import "core-js/modules/es6.promise";
import "core-js/modules/es6.array.iterator";

// ...