JSPM？system.js？webpack？まだAngular2/TypeScriptのBundle環境構築で消耗してる話

注)　この記事は試行錯誤の記録です。従って間違いが数多く含まれている可能性が高いです。もっと良い方法を知っている方はぜひ教えてください。

## 現段階の結論

注） 現在は、rollup.jsでバンドルしています。

system.jsを利用しています。
tsconfig.json, typing.jsonを適切に記載してからtscとuglifyjsを利用して minifyすることで、最終的なfootprintを5kbまで減らすことができました。
（system.jsでxhrが大量に走る問題は下記（system.jsの項）の通りmapとpackageの記載を削除することで解決しました。）
~~結局、現在はgithubでコミュニティベースで活発に開発されている[mgechev/angular2-seed](https://github.com/mgechev/angular2-seed)（Angular2公式Githubアカウントの[angular/angular2-seed](https://github.com/angular/angular2-seed)とは別もの）の環境をそのまま利用して、system.jsもwebpackも使わず、gulpですべてのtsをひとつのjsにBundleして利用中です。~~

## 方針（理想）

- 自作コード部分以外はCDNで指定したい
- 自作コード部分は読み込み時間が最小になるようにしたい

## Angular2を利用するための環境構築にあたって参考になりそうなサンプルを探す

0. system.js - Angular2公式サイトの[5 MIN QUICKSTART](https://angular.io/docs/ts/latest/quickstart.html)を参考に
0. webpack - Angular2公式Githubアカウントの[angular2-seed](https://github.com/angular/angular2-seed)を参考に
0. JSPM - Githubで見つけた[davinkevin/Angular2-Sandbox](https://github.com/davinkevin/Angular2-Sandbox/tree/master/JSPM)を参考に

### system.js での環境構築を検討してみる

index.html

    <script src="https://npmcdn.com/angular2/bundles/angular2-polyfills.min.js"></script>
    <script src="https://npmcdn.com/systemjs/dist/system.js"></script>
    <script src="https://npmcdn.com/typescript/lib/typescript.js"></script>
    <script src="https://npmcdn.com/@reactivex/rxjs/dist/global/Rx.min.js"></script>
    <script src="https://npmcdn.com/angular2/bundles/angular2.js"></script>
    <script src="https://npmcdn.com/angular2/bundles/router.min.js"></script>
    <script src="https://npmcdn.com/angular2/bundles/http.min.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('app/main')
        .then(null, console.error.bind(console));
    </script>


config.js

    System.config({
      transpiler: 'typescript',
      typescriptOptions: {emitDecoratorMetadata: true},
      map: {
          //'rxjs': "https://npmcdn.com/@reactivex/rxjs/src"
      },
      packages: {
        app: {
          defaultExtension: 'ts'
        },
        //'rxjs': {defaultExtension: 'ts'}
      }
      });

index.htmlへの記載はすべてcdnからの読み込みにしてみた。
~~が、、、rxjs関連のファイルを大量にxhrして読み込み完了までに10秒程度かかってるぞ？あきらかに必要ないファイルまで読み込んでる感じ、、、。~~
うーん。これどう解決したらいいんだ？
（大量のファイルの読み込み問題はconfig.js内でのrxjsの指定を削除して解決しました！）

あとは自作コード部分をひとまとめにbundleしたい。これを解決するのは~~JSPM？~~ （tscで解決しました。tscでbuildしたあとに[uglifyjs](https://github.com/mishoo/UglifyJS2)でminifyしています）

### JSPM での環境構築を検討してみる

上記の問題を解決してくれそうなJSPMだが、[angular2.jspm.md](https://gist.github.com/robwormald/429e01c6d802767441ec)辺りの議論や[TypeScript + jspm 触って消耗した話](http://qiita.com/Quramy/items/33cf5991ad8a9b385024)なんかを見てもまだ時期尚早な気がすると思いつつ、ちょっと環境構築を試みる~~もエラーが頻発~~

その後、[davinkevin/Angular2-Sandbox](https://github.com/davinkevin/Angular2-Sandbox/tree/master/JSPM)をgit cloneしたあと（このサンプルがこのままでは動かないので）下記のようにしてcryptoモジュールを追加。

    npm install
    jspm install crypto

その後、
system.js込みのbundle.jsを作成

    jspm bundle-sfx app/main.ts dist/bundle.js

system.jsを含んでいないbundle.jsを作成

    jspm bundle app/main.ts dist/bundle.js --minify --no-mangle

で、動作はしたけど、自作部分のみをbundleするためにはどうして良いやら・・・。

ただ、Webpackで出来上がるbundle.jsよりはサイズが小さいみたい。

### webpack での環境構築を検討してみる

ng-japan 2016でメモして帰ってきた[angular2-webpack-starter-minimum](https://github.com/shumpei/angular2-webpack-starter-minimum)を試してみた。
が、buildしてみると生成されるjsが10MB以上ある、、、。えっと、、、何かがおかしいことは明らかでいろいろパラメーターをいじってみたらもっと小さくなるのかも知れないが、とりあえず他の環境を試してみることにする。

### Githubでもっと良い方法がないか検索して探してみる

Githubで検索すると[mgechev/angular2-seed](https://github.com/mgechev/angular2-seed)の更新が活発なようだ。このプロジェクトではgulpでオリジナルbuild環境を整えているようだ。
試しにこれでbuildしてみると、prod環境のjsのサイズが全部ひとまとめで1MB以下でとりあえず1秒以内には読み込みが完了する。（もっと速くしたいけど、、、）
よし、もうとりあえずこれでいっとこう。~~（現時点での結論）~~

理想的にはここからangular2の本体部分なんかを分離してCDNで指定して、自作コード部分のみにしてもっと読み込みを速くしたい。
gulpのsrcを指定している部分で!でexclude指定すればいけるような気がして試行錯誤してみたが時間切れでギブアップ。