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 が @ を特殊文字として捉えているので、 @@ としないといけないのは要注意です。
ということで、メモでした。
参考：