live-serverを使ったファイルの変更の監視で、ファイルを更新しても何故かブラウザが自動リロードしてくれなかった。
ビルドスクリプト
esbuild-create-react-appで生成されたbuilder.tsと内容はほぼ同じ。
import { LiveServerParams, start } from "live-server"; import { build, BuildOptions } from "esbuild"; import cssModulesPlugin from "esbuild-css-modules-plugin"; import { removeSync, copySync } from "fs-extra"; import { watch } from "chokidar"; const isWatch = process.argv.includes("--watch"); const serverParams: LiveServerParams = { port: 8181, root: "build", open: true }; const buildParams: BuildOptions = { color: true, entryPoints: ["src/index.tsx"], loader: { ".ts": "tsx", ".json": "json", ".png": "file", ".jpeg": "file", ".jpg": "file", ".svg": "file" }, assetNames: "assets/[name]-[hash]", outdir: "build", minify: !isWatch, format: "cjs", bundle: true, sourcemap: isWatch, logLevel: "error", incremental: isWatch, plugins: [ cssModulesPlugin() ] }; // clean build folder try { removeSync("build"); } catch (e) { console.error(e); } // copy public folder into build folder try { copySync("public", "build"); } catch (e) { console.error(e); } if (isWatch) { (async () => { // build const result = await build(buildParams).catch(() => process.exit(1)); // start live server start(serverParams); return watch("src/**/*", { ignored: /(^|[/\\])\../, ignoreInitial: true }).on("all", async (event, path) => { if (event === "change") { console.log(`[esbuild] Rebuilding ${path}`); console.time("[esbuild] Done"); if (result.rebuild) await result.rebuild(); console.timeEnd("[esbuild] Done"); } }); })(); } else { console.log(`[esbuild] Building..`); build(buildParams).catch(() => process.exit(1)); }
ts-node scripts/build.ts --watch
esbuildがrebuildしたファイルを基にブラウザを自動リロードしたい。
原因
index.htmlのフォーマットに問題があった。 stackoverflow.com
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self'" /> --> <title>Title</title> </head> <body> <div id="root"></div> <script src="index.js"></script> </body> </html>
electronで使っていたindex.htmlをそのまま流用していたのが良くなかった。上のコメントアウトしたmetaタグがフォーマット的によろしくなかったらしい。
結論
web全然わからん