@babel/plugin-transform-dynamic-import · Babel

info

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:

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(($) => {});

Installation

  • npm
  • Yarn
  • pnpm
  • Bun
npm install --save-dev @babel/plugin-transform-dynamic-import

Usage

babel.config.json

{
"plugins": [
"@babel/plugin-transform-dynamic-import",
"@babel/plugin-transform-modules-commonjs"
]
}

Via CLI

Shell

babel --plugins=@babel/plugin-transform-dynamic-import,@babel/plugin-transform-modules-amd script.js

Via Node API

JavaScript

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

References