CDNで簡単にホットリロード環境を導入する仕組みを作った

課題

jQuery, HTML, PHPで構成されているようなプロジェクトで、新たにnpmやcomposerの導入が難しく、巷のホットリロードのツールが利用できない場合を想定。
つまり既存のプロジェクトの構成は変えられないけど、ホットリロード機構は欲しかった。

作ったもの

CDNで1行追加すれば手軽にホットリロードの仕組みを導入できるようにした。

<!-- hotreloadのためのjsをCDNで読み込む -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/nodejs-socket-client@1.0.1/index.js" integrity="sha256-h17+PbIX5sv+N7DmVZSHpZy/s0BoUWnUCi5jeo3OUTo=" crossorigin="anonymous"></script>
</head>

ファイル変更を検知するためのサーバーをローカルで立ち上げれば準備は完了。

#  初回セットアップ
git clone https://github.com/Rasukarusan/nodejs-socket-server.git
cd nodejs-socket-server
yarn
# ファイル変更監視のためのサーバーを立ち上げる
yarn dev ~/Desktop/target_dir

ファイルを保存するとブラウザがリロードされる。

ソースコード

github.com github.com

ファイル変更のためのサーバー用と、CDN配布用のクライアントの2つがある。手元で必要なのはサーバー側だけ。