メモログ

Angular2とDecorators - メモログに出した5 Min Quickstartのサンプルを再掲すると、冒頭にimportのstatementがあります。

1
2
3
4
5
6
7

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: 'My First Angular 2 App'
})
export class AppComponent { }

これはES6（ES2015）で追加されたimport機能。ES7でもjavascript-decorators/README.md at master ? wycats/javascript-decoratorsにて追加の宣言が提案されていて、このページには、ES6の宣言方法もリストにされてあって見やすい。

使い方は、たとえばモジュール側でexportで下記のように宣言したとする。

1
2

export function foo (){}
export function bar (){}

それをimportで呼び出すには、同じfunction名を使って呼び出すだけでいい。カンマ区切りで複数のfunctionを同時にimportできる。

1

import {foo, bar} from "./foobar.js"

モジュール全体を呼び出すなら、「*」を使って呼び出すだけで良い。

1
2

import * as foobar from "./foobar.js"
foobar.foo()

exportするモジュールでdefaultが設定されていれば、defaultのモジュールをシンプルな書き方で呼び出せる。

1

export default function  (){ console.log("foobar") }

1

import foobar from "foobar.js"

import / export のstatementは、現状で使われている CommonJS方式やAMD方式のメリットを踏襲しつつ、より簡潔で静的な解析がしやすい（=optimizeがしやすい）ものになっている。らしい。詳しくはECMAScript 6 modules: the final syntaxが参考になる。いまのところ直接サポートしているブラウザはなくて、Babelなどのtranspilerを使う感じになる。

なお、webpack の code splitting　は importの書式に対応していないらしい（webpackでbundleする前にCommonJSかAMD方式にtranspilerなどで変換する必要がある）。そして、webpackのcode splittingを使いたい場合は、CommonJS方式のrequire.ensureか、AMD方式のrequireか、いずれかを使った方がいい。

ES6 Modules

tldr: Webpack doesn’t support es6 modules, use require.ensure or require directly depending on which module format your transpiler creates.

Webpack 1.x.x (coming in 2.0.0!) does not natively support or understand ES6 modules. However, you can get around that by using a transpiler, like Babel, to turning the ES6 import syntax into CommonJs or AMD modules. This approach is effective but has one important caveat for dynamic loading.

追記（2016/2/4）：Webpack 2.0.5-betaでは、ES6 modulesでのcode splittingに対応している雰囲気。System.importの仕様の行方がいまいちわからないけど（… Was that removed from the spec?）