zebian.log

技術系備忘録とか

live-serverでブラウザの自動リロードが効かない問題

www.npmjs.com

live-serverを使ったファイルの変更の監視で、ファイルを更新しても何故かブラウザが自動リロードしてくれなかった。

ビルドスクリプト

www.npmjs.com

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全然わからん