Skip to content

Commit

Permalink
Add dynamic import note regarding babel preset env (#1877)
Browse files Browse the repository at this point in the history
  • Loading branch information
Nathan Isaac authored and existentialism committed Nov 29, 2018
1 parent 92a8936 commit 8b07f75
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 2 deletions.
27 changes: 26 additions & 1 deletion docs/plugin-syntax-dynamic-import.md
Expand Up @@ -32,7 +32,32 @@ babel --plugins @babel/plugin-syntax-dynamic-import script.js

```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-dynamic-import"]
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.

```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";

// ...
```
Expand Up @@ -33,7 +33,32 @@ babel --plugins @babel/plugin-syntax-dynamic-import script.js

```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-syntax-dynamic-import"]
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.

```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";

// ...
```

0 comments on commit 8b07f75

Please sign in to comment.