🐈

Viteで純粋なPugを使う

2022/04/08に公開

3件

Pug

Vite

tech

Discussion

t.k

こんにちは、参考にさせていただきました。とてもわかりやすく実行できました。

一点ご質問なのですが、pug構文でのエラーの際にnpm run devが落ちてしまうのですが、こちらは参考にさせて頂いたコード上そうなってしまうのでしょうか？もしくはviteがそれに対応していないのでしょうか？
もし御時間ありましたらご回答いただけると助かります。

YEND

tamon.kondo さん、ご指摘ありがとうございます。
これは私の参考コードが良くなかったですね。失礼しました。

plugins/vite-plugin-pug-serve.ts

const transformPugToHtml = (server: ViteDevServer, path: string) => {
-  const compiled = compileFile(path)();
-  return server.transformIndexHtml(path, compiled);
+  try {
+    const compiled = compileFile(path)();
+    return server.transformIndexHtml(path, compiled);
+  } catch (error) {
+    console.log(error);
+    return server.transformIndexHtml(path, "Pug Compile Error");
+  }
};

plugins/vite-plugin-pug-serve.tsのtransformPugToHtmlに対して上記のように例外処理を挟んでいただくと、Pugのコンパイルエラー時でも開発サーバーが落ちなくなると思います。
本記事内の方も修正させていただきました。

t.k

ありがとうございます！
無事動作致しました。
静的ページの複数対応とかだと下記リンクとの併用できてすごく助かりました。