ページをリロードしたらtypescriptをビルドする

typescriptを書いてると毎回手動でビルドするのが面倒なので ツールを使ってコードが保存されたら勝手にビルドするようにしますが
あれ、やりすぎじゃね？
保存のたびにビルドしてたらmacがホッカホカになっちゃうよ！

実行時する直前にビルドしてくれれば十分

開発中はこまめに動作確認しながら作っていくので、ビルドは実行直前にしてくれれば十分。
なのでそうゆうスクリプトを書きました。

作った

ソースはこれ

// ビルド設定
const jsFile = './docs/js/main.js';
const buildScript = `tsc src/main.ts --outFile ${jsFile}`;

// 標準ライブラリの読み込み
const http = require('http');
const fs = require('fs');
const exec = require('child_process').exec;

function createServer(
  buildScript,
  jsFile,
  contentType, // 任意, デフォルト: 'text/javascript'
  hostname,    // 任意, デフォルト: '127.0.0.1'
  port         // 任意, デフォルト: 3000
) {
  contentType = contentType || 'text/javascript';
  hostname = hostname || '127.0.0.1';
  port = port || 3000;

  http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', contentType);

    exec(buildScript, (err, body) => {
      if(err) {// ビルド失敗
        console.log(err);
        console.log(body);

        // エラーメッセージの取得 (改行等を適当にエスケープする)
        const message = body.split('\n').join('\\n').split("'").join("\\'");
        res.end(`alert('${message}')`);
      } else {// ビルド成功
        // 生成されたjsを返す
        res.end(fs.readFileSync(jsFile, 'utf8'));
      }
    })
  })
  .listen(port, hostname, () => console.log(`Server running at http://${hostname}:${port}/`));
}

// 実行
createServer(buildScript, jsFile);

これを実行した状態でhtmlの中に

<script src=”http://localnost:3000/” />

て書いて、webページをリロードすればOK。
リロードするとビルドが実行されて、ビルド後のjsを返します。
もしもビルドエラーになったらalertでエラーメッセージが表示されます。

こりゃ便利。

やってることは
シェル実行して、指定したファイルを返すだけなので ビルド対象はtypescriptでなくても動きます。
haxeとかkotlinjsとかscalajsとか。

これでホッカホカmacから脱却できるー。