フロントエンド開発では、ビルド後に毎回同じ作業を行うことがあります。
例えば、
- 不要なファイルをチェックする
- ファイルを別フォルダへコピーする
- 独自のチェックツールを動かす
このような処理は、毎回手動で実行するよりも、ビルド後に自動実行した方がミスを防げます。
この記事では、npmのpostbuildを使って、ビルド完了後に自動で処理を実行する方法を紹介します。
postbuildとは？
npmにはライフサイクルスクリプトという仕組みがあります。
例えば、npm run buildを実行すると、
prebuildbuildpostbuild
という順番でスクリプトが実行されます。
つまり、postbuildを定義しておけば、ビルドが成功したあとに自動で処理を実行できます。
例えば、Viteを使っているプロジェクトなら、package.jsonを次のようにします。
package.jsonに追加する
例えば、次のように記述します。
{
"scripts": {
"build": "vite build",
"postbuild": "node scripts/sample.js"
}
}この状態で
npm run buildを実行すると、
- Viteでビルド
- ビルド完了
sample.jsが自動実行
という流れになります。
普段どおりnpm run buildを実行するだけでよくなるため、実行漏れを防げます。
私が実際に使っている例
私のプロジェクトでは、ビルド後にdistフォルダ内に不要な画像が含まれていないかをチェックする処理を実行しています。
画像を削除したつもりでも、設定やビルドの影響で不要なファイルが残ってしまうことがあります。
そのため、ビルド後に自動チェックを行うことで、不要な画像を公開してしまうことを防いでいます。
※画像チェックの具体的な処理については、別の記事で紹介する予定です。
postbuildを使うメリット
postbuildを使うことで、ビルド後のルーチン作業を自動化できます。
例えば、
- 不要ファイルのチェック
- ファイルのコピー
- HTMLやCSSの検証
- 独自ツールの実行
など、ビルド後に必ず実行したい処理をまとめて自動化できます。
まとめ
postbuildは、ビルド成功後に自動で処理を実行できるnpmのライフサイクルスクリプトです。
毎回手動で実行している処理がある場合は、postbuildへ移動するだけで実行漏れを防ぎ、開発効率も向上します。
ビルド後に必ず行う処理があるなら、一度postbuildを活用してみるのがおすすめです。
