@babel/plugin-syntax-dynamic-import
NOTE: This plugin is included in
@babel/preset-env
, in ES2020.
tip
You can safely remove this plugin from your Babel config if using @babel/core
7.8.0 or above.
Installation
- npm
- Yarn
npm install --save-dev @babel/plugin-syntax-dynamic-import
yarn add --dev @babel/plugin-syntax-dynamic-import
Usage
With a configuration file (Recommended)
babel.config.json
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
Via CLI
Shell
babel --plugins @babel/plugin-syntax-dynamic-import script.js
Via Node API
JavaScript
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.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";
// ...
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";
// ...