Skip to main content

@babel/plugin-syntax-dynamic-import

信息

本插件包含在 @babel/preset-env、ES2020 中。

¥This plugin is included in @babel/preset-env, in ES2020.

提示

如果使用 @babel/core 7.8.0 或更高版本，你可以安全地从你的 Babel 配置中删除这个插件。

¥You can safely remove this plugin from your Babel config if using @babel/core 7.8.0 or above.

安装​

¥Installation

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

用法​

¥Usage

¥With a configuration file (Recommended)

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

通过 CLI​

¥Via CLI

Shell
babel --plugins @babel/plugin-syntax-dynamic-import script.js

通过 Node API​

¥Via Node API

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

使用 Webpack 和 @babel/preset-env​

¥Working with Webpack and @babel/preset-env

目前，@babel/preset-env 不知道将 import() 与 Webpack 内部依赖 Promise 一起使用。没有内置支持 Promise 的环境，如 Internet Explorer，将需要手动添加 promise 和 iterator 填充。

¥Currently, @babel/preset-env is unaware that using import() with Webpack relies on Promise internally. Environments which do not have builtin support for Promise, like Internet Explorer, will require both the promise and iterator polyfills be added manually.

例如，对于 core-js@3：

¥For example, with 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"),
  ],
  // ...
};

或

¥or

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

// ...

这与 core-js@2 相同，只是导入路径略有不同：

¥This is the same for core-js@2, except the imports paths are slightly different:

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

或

¥or

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

// ...