【Vite】ビルド時にファイルをコピーする

背景

Bun, Honox(Hono+Vite)の環境で、bun run buildをすると、dist配下にbuildされる。 デフォルトでは静的ファイルは public/static/配下に置くと、ビルドされたものが dist/static/ 配下に置かれる。 しかし、sitemap.xmlなどプロジェクトのルートから、dist/ の直下にコピーしたいときがある。 今回は、その静的ファイルのコピーの方法を説明します。

vite-plugin-static-copy

vite-plugin-static-copy というViteのプラグインを使用すれば、静的ファイルをビルド時にコピーすることができる。

インストール

bun i -D vite-plugin-static-copy

vite.config.tsの改修

そして、vite.config.tsを以下のように修正します。

import { viteStaticCopy } from "vite-plugin-static-copy";
 
export default defineConfig({
    plugins: [
      honox(),
      viteStaticCopy({
        targets: [
          {
            src: "app/foo.txt",
            dest: "hoge",
          },
        ],
      }),
    ]
})

importの追加、pluginに viteStaticCopyを追加しました。

項目の説明は以下のようになっています。

• src : コピー対象のファイルのパス
• dest : distファイル内のコピー先のファイルのパス(fooだとdist/fooに生成される。dist直下にしたい場合は.を指定する。)

ビルドしてみる

上記の設定でbun run buildすると

app/foo.txtがコピーされ、dist/hoge/foo.txtが生成される。