@babel/plugin-proposal-dynamic-import
NOTE: This plugin is included in
@babel/preset-env, in ES2020.
Transforms import() expressions to non-ESM module formats.
When (not) to use this plugin
If you are using a bundler, such as Webpack, Rollup or Parcel, you should not use this plugin and let your bundler handle import() expressions.
You should use this plugin if:
- You are authoring a Node.js library in ESM but want to distribute it in CommonJS(CJS): Install this plugin and
@babel/plugin-transform-modules-commonjs - You use RequireJS to load modules in the browser: Install this plugin and
@babel/plugin-transform-modules-amd - You use SystemJS to load modules in the browser: Install this plugin and
@babel/plugin-transform-modules-systemjs
This plugin must be used with one of the module transform plugins mentioned above.
Example
input.js
import("jquery").then($ => {});
will be transformed to
- CommonJS
- AMD
- SystemJS
output.js
Promise.resolve()
.then(() => _interopRequireWildcard(require("jquery")))
.then(($) => {});
output.js
define(["require"], function (_require) {
new Promise((_resolve, _reject) =>
_require(
["jquery"],
(imported) => _resolve(_interopRequireWildcard(imported)),
_reject
)
).then(($) => {});
});
output.js
System.register([], function (_export, _context) {
"use strict";
return {
setters: [],
execute: function () {
_context.import("jquery").then(($) => {});
}
};
});
Installation
- npm
- Yarn
- pnpm
npm install --save-dev @babel/plugin-proposal-dynamic-import
yarn add --dev @babel/plugin-proposal-dynamic-import
pnpm add --save-dev @babel/plugin-proposal-dynamic-import
Usage
With a configuration file (Recommended)
babel.config.json
{
"plugins": [
"@babel/plugin-proposal-dynamic-import",
"@babel/plugin-transform-modules-commonjs"
]
}
Via CLI
Shell
babel --plugins=@babel/plugin-proposal-dynamic-import,@babel/plugin-transform-modules-amd script.js
Via Node API
JavaScript
require("@babel/core").transformSync("code", {
plugins: [
"@babel/plugin-proposal-dynamic-import",
"@babel/plugin-transform-modules-systemjs"
],
});