Zenn
💨

Denoでホットリロードする

2021/06/12に公開
TypeScript
Deno
tech

Denoでホットリロードってどうやるんだろうと思って調べた備忘録です。

これを使います。
denon

ソースコードの例

tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "deno.ns",
      "dom"
     ],
    "plugins": [
      {
        "name": "typescript-deno-plugin"
      }
    ]
  }
}

app.html

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Helo denon!</title>
  </head>
  <body>
    <h1>Helo denon!</h1>
    <div id="content"></div>
    <script src="app.js"></script>
  </body>
</html>

app.ts

/// <reference lib="dom" />

const a = document.getElementById('content');
console.log(a);

denonをインストール

公式サイトの通りですが...。
Install

$ deno install --allow-read --allow-run --allow-write --allow-net -f -q --unstable https://deno.land/x/denon@2.3.2/denon.ts

denonコマンドを有効にするために、PATHを通します。.ｚｓｈｒｃファイルに記述しておいたほうがいいでしょう。

$ export PATH=$HOME/.deno/bin:$PATH

denonの設定ファイルを作成

続いてdenonの設定ファイルを作成します。
まずは初期化コマンド。

$ denon --init

そして、作成されたdenon.jsonファイルにdenoのbundleコマンドと監視設定を記述します。
TypeScriptファイルが更新されたときに自動的にbundleコマンドが実行するようにします。(ついでにHTMLとjsonファイルも)
ちなみにjsonファイル以外にも設定ファイルは作れるようです。
Configuration

{
  "$schema": "https://deno.land/x/denon/schema.json",
  "watch": true,
  "scripts": {
    "start": "deno bundle -c tsconfig.json app.ts app.js"
  },
  "watcher": {
    "exts": ["html", "json", "ts"]
  }
}

監視の開始

以上の設定の後、以下のコマンドを実行すれば、ファイルの監視が開始され、ファイルが更新されると自動的にビルドされます。

$ denon start

いやー探せばあるもんですね。

Discussion