@babel/plugin-syntax-dynamic-import
NOTE: This plugin is included in
@babel/preset-env
, in ES2020
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"; // ...