Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jspmとtypescriptで開発する

1,256 views

Published on

Development with jspm and typescript

Published in: Software
  • Be the first to comment

  • Be the first to like this

Jspmとtypescriptで開発する

  1. 1. jspm+typescript で開発する
  2. 2. 名前: @brn (青野健利) 職業: フロントエンドエンジニア・ネイティブエンジニア 会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger ブログ: http://brn-log.hatenablog.com/
  3. 3. What is jspm? ブラウザ向けのモジュール管理ツール ES6 Moduleを利用してランタイムでトランスパイルを行う cliも用意されており、npmのようにモジュールのinstallも可能
  4. 4. What is jspm? Pros •  watch等のジョブが不要 •  npm・jspm・githubからインストールできる Cons •  jspm_packagesというディレクトリを管理しなければいけない •  常に再コンパイルするのでメモリ負荷が大きい
  5. 5. How dose it works? Systemjsのtranspilerという仕組みを利用する。 現在の所、typescriptとbabel、traceurが選択できる。
  6. 6. How to use? jspm init moduleのインストール jspm.config.jsの初期化 jspm install <repo>:<module名>
  7. 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. 8. With Typescript jspm install ts compiler optionの設定 plugin-typescriptを使う typescriptOptions: { "tsconfig": true, "typeCheck": ‘strict’ }
  9. 9. With Typescript { “module”: “system” } tsconfig.json
  10. 10. With Typescript そのままブラウザで画面をチェック!
  11. 11. With Typescript typescriptでimportしたmoduleがsystemjs経由でロードされる
  12. 12. With Typescript Sourcemapsも勝手に生成してくれる!
  13. 13. Impressions 使い勝手は良い。 typescriptを書いて、コンパイルするフェーズが無いので、 ブラウザで直接typescriptを実行している感覚 一度設定してしまえば、開発するときには コードを書く => ブラウザをリロードする の流れで通常のJSを書いていた頃の感覚で作業できる。 またkarmaのプラグインもあるので、テストでも利用できる。
  14. 14. Impressions ただし、ブラウザ上で •  依存モジュールのロード •  ロードしたモジュールのコンパイル と少々負荷のかかる事を行うので、規模が大きくなってくると 非常にリロードに時間がかかるようになる。 特にnpmのモジュールを使っていると、 稀に依存が非常に多いモジュール等があり、 そういうものをロードすると 一気にストレスがたまる開発環境になってしまう。
  15. 15. Adopt or Hold? 使う分にはwebpack、browserifyに移行するのもそんなに難しくないので、 チャレンジしても問題ない。 特にtypescriptやbabelを利用する場合は出力するモジュール形式を 柔軟に変更できるため、どのモジュール管理システムを利用しても 移行・復帰共にあまり気にせず使うべき。 とりあえず、小・中規模程度のアプリにはjspmはかなり楽なのでおすすめ。

×