14
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

viteのbuild時のファイル名ハッシュを辞める

Last updated at Posted at 2022-06-29

以下の設定を追加する。

関連のある設定
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との平行運用として今回のやり方を採用しようと思っています。(まだ実運用に載せていないのでハードルはこれから解消するかもしれません

関連issue

Options for assets building without adding hash #378

14
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?