コフス技術ブログ

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

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

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

utils/deleteDir.ts
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の後に特定のディレクトリを削除する処理を追加します。

package.json
{
  "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でした。