主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2022/07/29
TypeScript を使いたーい!しかもできるだけ早くコンパイルして欲しいー!みたいなとき、 Vite は設定も少なく爆速なので便利ですよね。
ということで、今回は Vite + ASP.NET Core を使った、爆速フロントエンド開発の紹介です。
なお、開発サーバーのみ Vite を使う想定なので、 Production 環境はお好みに合わせてください。
ということで、早速ディレクトリ構成。 今回は以下の要件で作成するとします:
wwwroot
で静的リソースを配信するassets
ディレクトリでフロントエンド開発を行うといった場合、 Vite を使う場合は設定の変更と、 cshtml 側での設定の 2 つが必要です。
まず、 Vite の設定は、以下のようになります。
import { resolve } from "path";
import { defineConfig } from "vite";
export default defineConfig({
build: {
outDir: "wwwroot",
manifest: true,
rollupOptions: {
input: {
main: resolve(
__dirname,
"assets",
"main.ts"
)
}
}
}
});
単純な、 index.html
をエントリーポイントとしない構成ですね。
必要なのは outDir
を wwwroot
にしているくらいで、その他は最悪無くても OK です。
次に、 cshtml 側は以下のようにします:
@inject IWebHostEnvironment HostEnvironment
<head>
@if (HostEnvironment.IsDevelopment())
{
<script type="module" src="http://localhost:5173/@@vite/client"></script>
<script type="module" src="http://localhost:5173/assets/main.ts"></script>
}
</head>
とまぁ、要するに Laravel 開発とかと同じように設定してあげます。
Blazor が @
を特殊文字として捉えているので、 @@
としないといけないのは要注意です。
ということで、メモでした。
参考: