@babel/plugin-syntax-dynamic-import
Installation
npm install --save-dev @babel/plugin-syntax-dynamic-import
Usage
With a configuration file (Recommended)
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
Via CLI
babel --plugins @babel/plugin-syntax-dynamic-import script.js
Via Node API
require("@babel/core").transformSync("code", {
plugins: ["@babel/plugin-syntax-dynamic-import"],
});
Working with Webpack and @babel/preset-env
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.
For example, with core-js@3
:
// webpack config
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";
// ...
This is the same for core-js@2
, except the imports paths are slightly different:
// webpack config
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";
// ...