npmのscriptsを使ってみる

package.json内に設定できる、npmのscriptsについていくつか試してみます。

サンプルコード

プロジェクトディレクトリに移動して、package.jsonを作成します。

npm init -y

まずは文字列を出力するだけのscriptsを追加してみます。

{
  ～ 略 ～
  "scripts": {
    "test": "echo 'test script'"
  },
  ～ 略 ～
}

追加したスクリプトを実行してみます。

npm run test

結果以下のように出力されました。

'test script'

特定のスクリプトにpreやpostを付与した別のスクリプトを追加すると、そのスクリプトの前後に実行されます。
preはそのスクリプトの前、postは後になります。

{
  ～ 略 ～
  "scripts": {
    "test": "echo 'test script'",
    "pretest": "echo 'pretest script'",
    "posttest": "echo 'posttest script'"
  },
  ～ 略 ～
}

再度コマンドを実行してみます。

npm run test

testの前にpretest、testの後にposttestが実行されました。

'pretest script'
'test script'
'posttest script'

上記の他に、ライフサイクルスクリプトと呼ばれる特定のタイミングで実行されるスクリプト名が用意されています。
今回はその中からpreinstall(npm installの直前に実行)と、postinstall(npm installでのインストール後に実行)を試してみます。

{
  ～ 略 ～
  "scripts": {
    "preinstall":  "echo 'preinstall script'",
    "postinstall":  "sass --version"
  },
  ～ 略 ～
}

preinstallでは文字列の出力、postinstallではインストールされたsassのバージョンを出力するようにしています。
テストする前にsassをインストールしておきます。

npm install sass --save-dev

node_modulesを除去してから npm install を実行してみると、preinstallとpostinstallそれぞれの出力を確認できました。

'preinstall script'
1.90.0 compiled with dart2js 3.8.3

最後にscriptsで設定したスクリプトを別のスクリプトで使用する例です。

{
  ～ 略 ～
  "scripts": {
    "taskA": "echo 'taskA script'",
    "taskB": "echo 'taskB script'",
    "test": "npm run taskA && npm run taskB"
  },
  ～ 略 ～
}

testを実行することで、taskAとtaskBを順に実行するように指定しました。
コマンドを実行してみます。

npm run test

以下のように意図した出力を確認できました。

'taskA script'
'taskB script'

補足として、複数の処理を繋ぐ際に「&」を使うと並列処理(バックグラウンドで順次実行される)、「&&」を使うと直列処理(上記の場合、taskAの処理が成功したらtaskBが実行される)となるようです。