jspmでhot reloadしよう

  • 3
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

JSPMって?

SystemJSという便利なモジュールローダー(ES6形式、CommonJS形式、RequireJS形式などロードできる)用のパッケージマネージャーです。Out-of-the-boxで色々な機能が使えて便利なので、推しパッケージマネージャーとして最近布教しようとしています。

hot reloadする

SystemJSは1ファイル1ファイル読むので、ページリロードで毎回読んでいると結構ストレスになります。そこでhot reloadをしましょう。

下記のライブラリを有りがたく使わせていただきます。

https://github.com/capaj/systemjs-hot-reloader

基本はここのREADMEにある通りやれば大丈夫です。一応流れを書いておきますので、参考にしてください。

jspmインストール

パッケージをjspm経由でインストールします。jspmのバージョンは0.16.x系が2016/05/12時点では安定っぽいです。

jspm i --dev systemjs-hot-reloader

エントリーポイント読み込み時の記述を少し変更

System.importでエントリーポイントを読み込む前に、System.traceを記述します。

System.trace = true
System.import('./main.js')

エントリーポイントにimport文を追加

先ほどのmain.jsの冒頭に、下記の1行を追加しておきます。jspm bundleする際は、空のモジュールがimportされるようなので気にせずに書いておけばよいらしいです。

import 'systemjs-hot-reloader/default-listener.js'

クライアント側の修正は上記で終わりです。次にサーバーサイド側の用意を行います。(hot reloadのためにsocket.ioで通信するらしい)

2つのライブラリをインストール

ひとつ目は同じみhttp-server、2つめはsystemjs-hot-reloaderの作者が作った、ファイルの変更をsocket.io経由でクライアント側に通知するライブラリのようです。

npm i http-server --save-dev
npm i chokidar-socket-emitter --save-dev

server.jsを用意して、npm run serverで起動できるようにする

下記の内容でserver.jsを用意します。先ほどの https://github.com/capaj/systemjs-hot-reloader のサンプルからほぼパクってきたものです。(ポートをsystemjs-hot-reloader的標準の5776に変えてあります)

'use strict'
const httpServer = require('http-server')

let cache = 3600
if (process.env.NODE_ENV === 'production') {
  console.log('running in production mode(with caching)-make sure you have "Disable cache (while DevTools is open)" checked in the browser to see the changes while developing')
} else {
  cache = -1
}
const server = httpServer.createServer({
  root: '.',
  cache: cache,
  robots: false,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': 'true'
  }
})

require('chokidar-socket-emitter')({app: server.server})

server.listen(5776)

そしたらpackage.jsonのscriptsに次を追加します。

  ...
  "scripts": {
    ...
    "server": "node server.js",
    ...
  },
  ...

これで完了しました。最後にnpm run serverでhttp-serverを立ち上げ、 http://127.0.0.1:5776 にアクセスし、hot reloadが動くことを確認します。
最初の読み込み時は、hot reloadを使わない場合より若干時間がかかるような気がしますが、それ以降はファイルを変更すると即反映されるようになるので快適ですよー。

快適なJSPMライフを、多くの人が送れることを祈っております!あと、JSPMのアイコン設定しておきました!