跳至主要內容

@babel/plugin-syntax-dynamic-import

資訊

此外掛包含在 @babel/preset-env 中，在 ES2020 中。

提示

如果您使用 @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​

Shell
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 並不知道使用 import() 時，Webpack 內部依賴 Promise。沒有內建支援 Promise 的環境，例如 Internet Explorer，需要手動新增 promise 和 iterator polyfill。

例如，使用 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";

// ...