jspm+typescript で開発する

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

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

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

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

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

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: {} });

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

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

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

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

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

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

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

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