JSPMって?
SystemJSという便利なモジュールローダー(ES6形式、CommonJS形式、RequireJS形式などロードできる)用のパッケージマネージャーです。Out-of-the-boxで色々な機能が使えて便利なので、推しパッケージマネージャーとして最近布教しようとしています。
hot reloadする
SystemJSは1ファイル1ファイル読むので、ページリロードで毎回読んでいると結構ストレスになります。そこでhot reloadをしましょう。
下記のライブラリを有りがたく使わせていただきます。
基本はここの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のアイコン設定しておきました!