Skip to content

Migration docs: Changed System.import to import() #499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 15, 2016
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions content/guides/migrating.md
Original file line number Diff line number Diff line change
Expand Up @@ -273,15 +273,15 @@ require.ensure([], function(require) {
});
```

The ES2015 Loader spec defines `System.import` as method to load ES2015 Modules dynamically on runtime.
The ES2015 Loader spec defines `import()` as method to load ES2015 Modules dynamically on runtime.

webpack treats `System.import` as a split-point and puts the requested module in a separate chunk.
webpack treats `import()` as a split-point and puts the requested module in a separate chunk.

`System.import` takes the module name as argument and returns a Promise.
`import()` takes the module name as argument and returns a Promise.

``` js
function onClick() {
System.import("./module").then(module => {
import("./module").then(module => {
module.default;
}).catch(err => {
console.log("Chunk loading failed");
Expand All @@ -291,23 +291,25 @@ function onClick() {

Good news: Failure to load a chunk can be handled now because they are `Promise` based.

Caveat: `require.ensure` allows for easy chunk naming with the optional third argument, but `System.import` API doesn't offer that capability yet. If you want to keep that functionality, you can continue using `require.ensure`.
Caveat: `require.ensure` allows for easy chunk naming with the optional third argument, but `import` API doesn't offer that capability yet. If you want to keep that functionality, you can continue using `require.ensure`.

```javascript
require.ensure([], function(require) {
var foo = require("./module");
}, 'custom-chunk-name');
```

(Note on the deprecated `System.import`: Webpack's use of `System.import` didn't fit the proposed spec, so it was deprecated in [v2.1.0-beta.28](https://github.com/webpack/webpack/releases/tag/v2.1.0-beta.28) in favor of `import()`)

### Dynamic expressions

It's possible to pass a partial expression to `System.import`. This is handled similar to expressions in CommonJS (webpack creates a [context](https://webpack.github.io/docs/context.html) with all possible files).
It's possible to pass a partial expression to `import()`. This is handled similar to expressions in CommonJS (webpack creates a [context](https://webpack.github.io/docs/context.html) with all possible files).

`System.import` creates a separate chunk for each possible module.
`import()` creates a separate chunk for each possible module.

``` js
function route(path, query) {
return System.import("./routes/" + path + "/route")
return import("./routes/" + path + "/route")
.then(route => new route.Route(query));
}
// This creates a separate chunk for each possible route
Expand Down