任意で用意したコマンドだけでなく$ 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で特定のコマンド実行時に複数の処理を行いたい場合、ワンライナーでまとめて記述すると内容によっては記述量が多くて見辛いことがあります。
また、各処理をそれぞれ別スクリプトとして用意したものを直列や並列でまとめて実行させるという方法もありますが、この場合はそれぞれの実行内容は把握しやすくなるものの様々な命名のコマンドが乱立するのに繋がってきます。
もちろん、これらが問題になるということではないので結局個人の好みにはなってきますが、もう少し各記述をシンプルにしたいとか命名が全く異なるコマンドをむやみに増やしたくないというときは、ここで紹介してきたプレフィックスを利用するのも解決方法のひとつだと思います。
プレフィックスを付けたその他のコマンド例や実行タイミングなどについては下記で確認できます。