diff --git a/docs/plugin-syntax-dynamic-import.md b/docs/plugin-syntax-dynamic-import.md index 1dd1834313..c10b00d98b 100644 --- a/docs/plugin-syntax-dynamic-import.md +++ b/docs/plugin-syntax-dynamic-import.md @@ -4,6 +4,17 @@ title: @babel/plugin-syntax-dynamic-import sidebar_label: syntax-dynamic-import --- +`@babel/plugin-syntax-dynamic-import` is needed to enable support for parsing `import()` + +This plugin is enabled by default since Babel 7.8.0, so you shouldn't need to enable this plugin separately. + +**Usage notes:** + +1. If you are using `@babel/preset-env`, it's automatically handled +2. If you are using Webpack or Rollup, you shouldn't transpile `import()` with Babel and let the bundler handle it for you +3. Otherwise, you need `@babel/plugin-proposal-dynamic-import` + + ## Installation ```sh diff --git a/website/versioned_docs/version-6.26.3/plugin-syntax-dynamic-import.md b/website/versioned_docs/version-6.26.3/plugin-syntax-dynamic-import.md index 12da68e7c3..d77247ee83 100644 --- a/website/versioned_docs/version-6.26.3/plugin-syntax-dynamic-import.md +++ b/website/versioned_docs/version-6.26.3/plugin-syntax-dynamic-import.md @@ -5,6 +5,14 @@ sidebar_label: syntax-dynamic-import original_id: babel-plugin-syntax-dynamic-import --- +`babel-plugin-syntax-dynamic-import` is needed to enable support for parsing `import()` + +**Usage notes:** + +1. If you are using `babel-preset-env`, it's automatically handled +2. If you are using Webpack or Rollup, you shouldn't transpile `import()` with Babel and let the bundler handle it for you +3. Otherwise, you need `babel-plugin-proposal-dynamic-import` + ## Installation ```sh diff --git a/website/versioned_docs/version-7.0.0/plugin-syntax-dynamic-import.md b/website/versioned_docs/version-7.0.0/plugin-syntax-dynamic-import.md index 369dee4966..cc295b0259 100644 --- a/website/versioned_docs/version-7.0.0/plugin-syntax-dynamic-import.md +++ b/website/versioned_docs/version-7.0.0/plugin-syntax-dynamic-import.md @@ -5,6 +5,14 @@ sidebar_label: syntax-dynamic-import original_id: babel-plugin-syntax-dynamic-import --- +`@babel/plugin-syntax-dynamic-import` is needed to enable support for parsing `import()` + +**Usage notes:** + +1. If you are using `@babel/preset-env`, it's automatically handled +2. If you are using Webpack or Rollup, you shouldn't transpile `import()` with Babel and let the bundler handle it for you +3. Otherwise, you need `@babel/plugin-proposal-dynamic-import` + ## Installation ```sh diff --git a/website/versioned_docs/version-7.4.0/plugin-syntax-dynamic-import.md b/website/versioned_docs/version-7.4.0/plugin-syntax-dynamic-import.md index f5e011ab1d..1f6ac94e24 100644 --- a/website/versioned_docs/version-7.4.0/plugin-syntax-dynamic-import.md +++ b/website/versioned_docs/version-7.4.0/plugin-syntax-dynamic-import.md @@ -5,6 +5,14 @@ sidebar_label: syntax-dynamic-import original_id: babel-plugin-syntax-dynamic-import --- +`@babel/plugin-syntax-dynamic-import` is needed to enable support for parsing `import()` + +**Usage notes:** + +1. If you are using `@babel/preset-env`, it's automatically handled +2. If you are using Webpack or Rollup, you shouldn't transpile `import()` with Babel and let the bundler handle it for you +3. Otherwise, you need `@babel/plugin-proposal-dynamic-import` + ## Installation ```sh diff --git a/website/versioned_docs/version-7.8.0/plugin-syntax-dynamic-import.md b/website/versioned_docs/version-7.8.0/plugin-syntax-dynamic-import.md new file mode 100644 index 0000000000..985ddc3665 --- /dev/null +++ b/website/versioned_docs/version-7.8.0/plugin-syntax-dynamic-import.md @@ -0,0 +1,99 @@ +--- +id: version-7.8.0-babel-plugin-syntax-dynamic-import +title: @babel/plugin-syntax-dynamic-import +sidebar_label: syntax-dynamic-import +original_id: babel-plugin-syntax-dynamic-import +--- + +`@babel/plugin-syntax-dynamic-import` is needed to enable support for parsing `import()` + +This plugin is enabled by default since Babel 7.8.0, so you shouldn't need to enable this plugin separately. + +**Usage notes:** + +1. If you are using `@babel/preset-env`, it's automatically handled +2. If you are using Webpack or Rollup, you shouldn't transpile `import()` with Babel and let the bundler handle it for you +3. Otherwise, you need `@babel/plugin-proposal-dynamic-import` + + +## Installation + +```sh +npm install --save-dev @babel/plugin-syntax-dynamic-import +``` + +## Usage + +### With a configuration file (Recommended) + +```json +{ + "plugins": ["@babel/plugin-syntax-dynamic-import"] +} +``` + +### Via CLI + +```sh +babel --plugins @babel/plugin-syntax-dynamic-import script.js +``` + +### Via Node API + +```javascript +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](https://webpack.js.org/guides/code-splitting/#dynamic-imports). 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`: + +```js +// webpack config +const config = { + entry: [ + "core-js/modules/es.promise", + "core-js/modules/es.array.iterator", + path.resolve(__dirname, "src/main.js"), + ], + // ... +}; +``` + +or + +```js +// 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: + +```js +// webpack config +const config = { + entry: [ + "core-js/modules/es6.promise", + "core-js/modules/es6.array.iterator", + path.resolve(__dirname, "src/main.js"), + ], + // ... +}; +``` + +or + +```js +// src/main.js +import "core-js/modules/es6.promise"; +import "core-js/modules/es6.array.iterator"; + +// ... +```