Help us understand the problem. What is going on with this article?

生産性が高くホワイトボックスなローカルSPA開発環境レシピ 〜 JSおくのほそ道 #039

こんにちは、ほそ道です。

スクラッチでSPAプロジェクトを作るとき、ボイラープレートに依存すると楽なんですが、自分でカスタマイズしながら環境構築するのも知識が深まってオツではないかとおもいます。
今回は、自分でもたまにやると忘れてしまうのでレシピをまとめておきたいと思います。
目次はこちら

高生産性

ローカルでのSPA開発の生産性を高める為によくやる下記のような環境構築、今回は下記のようなものを扱います。

  • 1.ファイルを保存したら差分ビルド
  • 2.ウェブサーバを起動しつつ同時にブラウザ起動
  • 3.ファイルを更新したら併せてブラウザ自動リロード

ホワイトボックス

色んなライブラリに依存しながらブラウザ起動やオートリロードを統合的に提供してくれるようなサーバライブラリもありますが、自分で組み合わせると問題が起きたときの原因対応が容易というメリットがあると思っています。

  • バージョンアップ時に動作しなくなったときなどgithubのissueにたどり着きやすい
  • 機能毎にライブラリを分けているので、問題が起きたときなど一部のライブラリのみを切り離すことが容易
  • 一部のライブラリを変更して、自分で組み合わせを変更し易い

1.ファイルを保存したら差分ビルド

webpackのwatch機能を使います。
準備としてwebpackをインストール(今回はglobalではなくプロジェクトローカルで)して、プロジェクトルートにwebpack.config.jsを設置します。
(configに関してはあらゆるところにサンプルがあるので割愛します)

1-a.CLIで実行

ターミナルで実行。とりあえず動かしたい時に楽ちんです。

ターミナル
npx webpack --watch

1-b.前後処理が必要な時

だいたいそれなりのプロジェクトではファイルクレンジングやコピーなどの様々な前後処理が発生して、シェルで賄うのがしんどくなってしまうので、そんな時にはスクリプトを作って実行しています。

scripts/build-watch.js
const webpack = require('webpack');
const path = require('path');

const webpackConf = require(path.resolve('./webpack.config'));
const webpackCompiler = webpack(webpackConf);

// ビルド前処理

webpackCompiler.watch({poll: true}, callback);

// ビルド後処理

function callback(err) {
  if (err) {
    process.stderr.write(err);
    process.exit();
  } else {
    // カスタムなビルド完了メッセージ
    process.stdout.write(`Webpack Build Complete At: [${new Date()}]\n`);
  }
}

ターミナルで実行。

ターミナル
node scripts/build-watch.js

2.ウェブサーバを起動しつつ同時にブラウザ起動

2-1.ウェブサーバ

local-web-serverを使います。
このライブラリを選定しているのは下記のようなSPA開発向けでよく使うURL裁きが柔軟に出来るからです。
(この話の詳細は別記事にて詳しく書いています)

  • 機能がURLにマッチするリソースがない場合に指定したhtmlファイルを返すことが可能
  • 名前の異なるURLとHTMLファイルをマッチングするRewrite処理が可能

インストールして下記のようにターミナルで実行(リソースはpublicディレクトリに配置してます)。
--directoryオプションは-dに、--spaオプションは-sに、--rewriteオプションは-rに省略可能です。

ターミナル
$ npx ws --directory public --spa index.html --rewrite "/login -> /auth.html"

2-2.ブラウザ起動

openerを使います。
指定したURLでブラウザをオープンさせます。
(自分はMacを使っているのでWindowsだと勝手が違うかもしれません)

インストールして、特にブラウザを指定する必要が無ければ、URLを指定して実行するだけです。

ターミナル
npx opener http://localhost:8000

2-3.ウェブサーバと組み合わて実行

(順序の関係で一瞬ページが見つからないエラーが表示されるかもしれませんが)

ターミナル
npx opener http://localhost:8000 & npx ws -d public -s index.html

3.ファイルを更新したら併せてブラウザ自動リロード

livereloadを使います。
publicディレクトリにhtmlやjsのリソースがあったとして、それらのリソースに更新があればブラウザの自動リロードを行います。
このライブラリはコマンド実行に加え、htmlファイル側にも仕込みが必要です。
インストールしたら、自動リロードしたいhtmlファイルの末尾に下記を挿入しておきます。

hoge.html
<body>
  ...
  <script>
    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
    ':35729/livereload.js?snipver=1"></' + 'script>')
  </script>
</body>

実行。これもファイルの変更を見張る常駐プロセスとして動きます。

ターミナル
npx livereload public

まとめ:npm scriptに設定

だいたい自分はプロジェクトメンバー向けにnpm run出来るようにパッケージングしてしまうのでサンプルを書いておきます。

package.json
{
  "scripts": {
    "build-watch": "node ./scripts/build-watch.js",
    "webserver": "npx opener http://localhost:8000 & npx ws -d public --spa index.html",
    "autoreload": "npx livereload public"
  },
  ...
}

余談ですがWebStormというエディタだとnpm runの実行がGUIクリックで出来るので死ぬほど楽です:smile:

以上となります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away