Babel
  • Docs
  • Setup
  • Try it out
  • Videos
  • Blog
  • Donate
  • Team
  • GitHub
Edit

@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").transform("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";

// ...
  • Installation
  • Usage
    • With a configuration file (Recommended)
    • Via CLI
    • Via Node API
  • Working with Webpack and @babel/preset-env
Babel
Docs
Learn ES2015
Community
VideosUser ShowcaseStack OverflowSlack ChannelTwitter
More
BlogGitHub OrgGitHub RepoWebsite RepoOld 6.x SiteOld 5.x Site