Mainly Devel Notes

Twitter, GitHub, StackOverflow: @ovrmrw (short hand of "overmorrow" that means the day after tomorrow)

Angular2 + Webpackで5 Min Quickstartを書き直した。

Angular2を書くなら誰でも一度は通る 5 Min Quickstart ですが、これはモジュールローダーにSystemJSが使われています。

以前はAngularチームの勧めに沿ってSystemJSベースで書いていましたが、どうもツイッターの面々を見ているとSystemJSで書いている人はほとんどいない。というか一人もいない。
じゃあ代わりに何が使われているかというと、個人的な観測では今の主流はWebpackですね。

よしじゃあAngular2とWebpackを組み合わせたサンプルを探してみよう。

そして見つけたのがこれ。↓
AngularClass/angular2-webpack-starter

しばらくコードを眺めましたが全然理解できない。Webpackってこんなに難しいのか。これがモダンWebの壁なのか。

気を取り直して公式のチュートリアルでも眺めてみます。↓
tutorials/getting-started

なんだこれ簡単じゃないか。さっきのスターターは全然スターターじゃなかった。確かにビギナー向けとは書いてなかったけども。


ネットは頼りにならなかったので自分で5 Min Quickstartを書き直しました。
オリジナルのコードにはほとんど変更を加えていません。少しコメントアウトしたり付け足したぐらい。個人的趣味でasync/awaitも書ける仕様にしておきました。

それがこれ。↓
ovrmrw/angular2-5minquickstart-webpack

bundle.jsがすごいサイズになるのはともかくとして、必要なモジュールを一気にまとめあげてしまう威力はすごいです。

ただこれ、僕がよくわかっていないで使っているからなのか、WebpackでUglifyJSプラグインを使ってミニファイすると動作しなくなります。間違った書き方をしているかもしれないのであまり書いてあることを鵜呑みにしないでください。

とりあえずはミニファイしようとしなければ動きますので「スターターが全然スターターじゃねぇよ」という人はどうぞ。