任意で用意したコマンドだけでなく$ npm start
前や$ npm install
後などに実行させることも可能なので、上手く利用すればコマンドの乱立を防いだり入力の手間を省くことができます。
前で実行させるpre
特定のコマンド実行時にそのスクリプトが実行される前に実行させたいスクリプトがある場合は、pre
を付与したスクリプト名で記述します。
例として実際にコマンド入力で実行するのがexample
というスクリプト名だった場合、その前に実行させたいものはpreexample
というスクリプト名にし、package.json
では下記のように記述します。
{
"scripts": {
"preexample": "echo 'Before example task'",
"example": "echo 'Run example'"
}
}
記述後に$ npm run example
を実行すると、「Run example」という文言が出力される前に「Before example task」という文言が出力され、example
の前にpreexample
が実行されているのを確認できます。
後で実行させるpost
先ほどとは逆で、特定のコマンド実行時に実行されたスクリプトのさらに後で実行させたいスクリプトがある場合は、post
を付与したスクリプト名で記述します。
例として実際にコマンド入力で実行するのがexample
というスクリプト名だった場合、後に実行させたいものはpostexample
というスクリプト名にし、package.json
では下記のように記述します。
{
"scripts": {
"example": "echo 'Run example'",
"postexample": "echo 'After example task'"
}
}
記述後に$ npm run example
を実行すると、「Run example」という文言が出力された後に「After example task」という文言が出力され、example
の後にpostexample
が続けて実行されているのを確認できます。
予約語やインストール時などでも使える
pre
とpost
は上で紹介したような任意で作成したスクリプトだけでなく、$ npm install
や$ npm start
の前後で使用することもできます。
下記をそのまま記述して実行した場合は、postinstall
によって$ npm install
でパッケージインストール後に「Install done」という文言が出力されるようになり、prestart
によって$ npm start
で「Before starting」という文言が出力された後に「Starting development」という文言が出力されるのを確認できます。
{
"scripts": {
"postinstall": "echo 'Install done'",
"prestart": "echo 'Before starting'",
"start": "echo 'Starting development'"
}
}
もう少し具体的な使用方法としては、例えばpostinstall
であればパッケージインストール後にとりあえずビルドタスクを実行させる、prestart
であれば何らかのセットアップタスクを実行してから開発をスタートさせるといったことがそれぞれ1コマンド実行するだけで可能になります。
また、前後で行いたい内容は別スクリプトとして記述する形になるので、ワンライナーで長々と記述されているよりかは内容が分割されて各処理内容を把握しやすくなります。
npm-scriptsで特定のコマンド実行時に複数の処理を行いたい場合、ワンライナーでまとめて記述すると内容によっては記述量が多くて見辛いことがあります。
また、各処理をそれぞれ別スクリプトとして用意したものを直列や並列でまとめて実行させるという方法もありますが、この場合はそれぞれの実行内容は把握しやすくなるものの様々な命名のコマンドが乱立するのに繋がってきます。
もちろん、これらが問題になるということではないので結局個人の好みにはなってきますが、もう少し各記述をシンプルにしたいとか命名が全く異なるコマンドをむやみに増やしたくないというときは、ここで紹介してきたプレフィックスを利用するのも解決方法のひとつだと思います。
プレフィックスを付けたその他のコマンド例や実行タイミングなどについては下記で確認できます。