Viteにてbuild時にpublic配下の一部のディレクトリを除きたい場合

2023/01/20（金）

Viteにてbuild時にpublic/配下の特定のディレクトリを除く、という処理はデフォルトの処理では簡単には行えません。（2023/01/20現在）
プラグインを自作して対応することも出来ますが、より簡単な方法として一度普通にbuildしてしまいその後に特定のディレクトリを削除する、という方法であれば安易に対応出来ます。

例えば以下の様な、特定のディレクトリを削除するスクリプトを用意します。

import fs from 'fs'
import path, { dirname } from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

/**
 * ディレクトリを削除する
 * @param targetPath 対象ディレクトリ
 * @param deletePaths targetPathから削除するディレクトリ
 */
const deleteDir = (targetPath: string, deletePaths: string[]) => {
  // targetPathを取得
  const targetDir = path.join(__dirname, '../' + targetPath)

  // targetPathが存在しない場合は処理を終了
  if (!fs.existsSync(targetDir)) return

  // targetPathからdeletePathsを取得して削除
  deletePaths.forEach((removePath) => {
    const removeDir = path.join(targetDir, removePath)

    // removeDirが存在しない場合は処理を終了
    if (!fs.existsSync(removeDir)) return

    // removeDirを削除
    fs.rm(removeDir, { recursive: true }, (err) => {
      if (err) {
        console.log(err)
      } else {
        console.log(`👉 Deleted ${removeDir}`)
      }
    })
  })
}

deleteDir('dist', ['delete-dir'])

deleteDir()関数は以下の様に指定して使用します。

引数	説明	type	例
第一引数	build出力ディレクトリを指定	string	`'dist'`
第二引数	削除したいディレクトリ名を指定	string[]	`['delete-dir']`

次に扱いやすいように、package.jsonのscriptsに通常のbuildの後に特定のディレクトリを削除する処理を追加します。

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
   "build-without-dir": "tsc && vite build && yarn node --loader ts-node/esm utils/deleteDir.ts",
    ...
  }
}

後はyarn build-without-dirを実行するとbuild後にdist/delete-dirを削除することが出来ます。

$ yarn build-without-dir
yarn run v1.22.0
$ tsc && vite build && yarn node --loader ts-node/esm utils/deleteDir.ts
vite v3.1.7 building for production...
✓ 327 modules transformed.
👉 Deleted /User/Desktop/dist/delete-dir
✨  Done in 12.42s.

ディレクトリを除けないならbuild後に削除してしまおう、というTipsでした。