Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jspmとtypescriptでの開発について

 jspmとtypescriptでの開発について

jspmとtypescriptを組み合わせた開発のメリット・デメリット

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

Transcript

  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はかなり楽なのでおすすめ。