以下の設定を追加する。
関連のある設定
rollupOptions.output.entryFileNames
rollupOptions.output.chunkFileNames
rollupOptions.output.assetFileNames
rollupの設定が露出しているので不明点があればrollup側のドキュメントを読むと良い。
ref: https://rollupjs.org/guide/en/#outputentryfilenames
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
outDir: './path/to/', // ビルド成果物の生成先
rollupOptions: {
output: { // entry chunk assets それぞれの書き出し名の指定
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`,
},
},
},
})
なぜこれをやりたかったのか
jQuery -> React + TSの環境を段階的に移行するシステムの構築する目的がありました。
entry, chunk, assetsのファイル名を固定化して
jQuery側から直接Reactのコンポーネントをレンダリングできれば
段階的にUIのみをreact化、UIが揃ったらロジック面をテスト込で置き換えることができるため
Next.js や Remixなどの選択肢ではなく、react-domを使ったjQueryとの平行運用として今回のやり方を採用しようと思っています。(まだ実運用に載せていないのでハードルはこれから解消するかもしれません