Development with jspm and typescript

1. jspm+typescript
で開発する

2. 名前: @brn (青野健利)
職業: フロントエンドエンジニア・ネイティブエンジニア
会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger
ブログ: http://brn-log.hatenablog.com/

3. What is jspm?
ブラウザ向けのモジュール管理ツール
ES6 Moduleを利用してランタイムでトランスパイルを行う
cliも用意されており、npmのようにモジュールのinstallも可能

4. What is jspm?
Pros
• watch等のジョブが不要
• npm・jspm・githubからインストールできる
Cons
• jspm_packagesというディレクトリを管理しなければいけない
• 常に再コンパイルするのでメモリ負荷が大きい

5. How dose it works?
Systemjsのtranspilerという仕組みを利用する。
現在の所、typescriptとbabel、traceurが選択できる。

6. How to use?
jspm init
moduleのインストール
jspm.config.jsの初期化
jspm install <repo>:<module名>

7. How to use?
SystemJS.config({
paths: {
"npm:": "jspm_packages/npm/",
"test-package/": "src/"
},
browserConfig: {
"baseURL": "/"
},
devConfig: {
"map": {
"plugin-babel": "npm:systemjs-plugin-babel@0.0.18"
}
},
transpiler: "plugin-babel",
packages: {
"test-package": {
"main": "test-package.js",
"meta": {
"*.js": {
"loader": "plugin-babel"
}
}
}
}
});
SystemJS.config({
packageConfigPaths: [
"npm:@*/*.json",
"npm:*.json"
],
map: {},
packages: {}
});

8. With Typescript
jspm install ts
compiler optionの設定
plugin-typescriptを使う
typescriptOptions: {
"tsconfig": true,
"typeCheck": ‘strict’
}

9. With Typescript
{
“module”: “system”
}
tsconfig.json

10. With Typescript
そのままブラウザで画面をチェック！

11. With Typescript
typescriptでimportしたmoduleがsystemjs経由でロードされる

12. With Typescript
Sourcemapsも勝手に生成してくれる！

13. Impressions
使い勝手は良い。
typescriptを書いて、コンパイルするフェーズが無いので、
ブラウザで直接typescriptを実行している感覚
一度設定してしまえば、開発するときには
コードを書く => ブラウザをリロードする
の流れで通常のJSを書いていた頃の感覚で作業できる。
またkarmaのプラグインもあるので、テストでも利用できる。

14. Impressions
ただし、ブラウザ上で
• 依存モジュールのロード
• ロードしたモジュールのコンパイル
と少々負荷のかかる事を行うので、規模が大きくなってくると
非常にリロードに時間がかかるようになる。
特にnpmのモジュールを使っていると、
稀に依存が非常に多いモジュール等があり、
そういうものをロードすると
一気にストレスがたまる開発環境になってしまう。

15. Adopt or Hold?
使う分にはwebpack、browserifyに移行するのもそんなに難しくないので、
チャレンジしても問題ない。
特にtypescriptやbabelを利用する場合は出力するモジュール形式を
柔軟に変更できるため、どのモジュール管理システムを利用しても
移行・復帰共にあまり気にせず使うべき。
とりあえず、小・中規模程度のアプリにはjspmはかなり楽なのでおすすめ。