npm-run-allの使い方とscriptへの引数の渡し方

概要

npm-run-allは package.json の scripts で定義されたscriptを並列または直列的に複数実行できるnpmモジュールです。
npmには複数のscriptをまとめて実行するような機能がないので、そういったことをやりたい場合はnpm-run-allやconcurrentlyのようなnpmモジュールを使います。
今回の記事ではインストール数が圧倒的に多いnpm-run-allについて使い方をまとめます。

基本的な使い方

npm-run-allを試すだけのリポジトリで試していきたいと思いますので、まずは任意のディレクトリで下記コマンドを実行します。

bash_____terminal_____$ npm init -y

次にnpm-run-allをインストールします。

bash_____terminal_____$ yarn add -D npm-run-all

あとは基本的な使い方を確認するために以下のscriptを package.json に追加します。

json_____package.json_____{
  "name": "npm-run-all-scripts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "echo:1": "echo \"execute: echo:1\"",
    "echo:2": "echo \"execute: echo:2\"",
    "echo:3": "echo \"execute: echo:3\"",
    "echo-all": "run-s \"echo:*\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

run-s はnpm-run-allが提供する、後続のscriptを直列的に実行していくコマンドで npm-run-all --serial の省略形です。
今回のサンプルでは直列的に見れたほうがわかりやすいので run-s を使いますが、並列的に実行したい場合は npm-run-all --parallel の省略形 run-p を使いましょう。

それではまず echo:1 を実行してみます。

bash_____terminal_____$ yarn echo
yarn run v1.22.19
$ echo "execute: echo:1"
execute: echo:1
✨  Done in 0.04s.

echo は単純に文字列を出力するだけのコマンドなので package.json のscriptsで定義した execute: echo:1 の文字列が出力されました。
続いてnpm-run-allの run-s コマンドを使った echo-all 実行してみます。

bash_____terminal_____$ yarn echo-all
yarn run v1.22.19
$ run-s "echo:*"
$ echo "execute: echo:1"
execute: echo:1
$ echo "execute: echo:2"
execute: echo:2
$ echo "execute: echo:3"
execute: echo:3
✨  Done in 0.85s.

run-s のあとに \"echo:*\" としているので、scriptsで定義されたscriptから echo: で始まるコマンドが順番に実行されました。

scriptへの引数の渡し方

基本的な使い方がわかったところで、次はscriptへの引数の渡し方を紹介します。
package.json に以下のscriptを追加します。

json_____package.json_____{
  "name": "npm-run-all-scripts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "echo:1": "echo \"execute: echo:1\"",
    "echo:2": "echo \"execute: echo:2\"",
    "echo:3": "echo \"execute: echo:3\"",
    "echo-all": "run-s \"echo:*\"",
    "script:node": "node",
    "script:npm": "npm",
    "script-all": "run-s \"script:* {@}\" --",
    "script-in-order": "run-s \"script:node {1}\" \"script:npm {2}\" --"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

上記が追加できたら以下のコマンドを実行してみましょう。

bash_____terminal_____$ yarn script-all --version
yarn run v1.22.19
$ run-s "script:* {@}" -- --version
$ node --version
v16.15.1
$ npm --version
8.11.0
✨  Done in 1.24s.

今回は script-all を実行するときに --version という引数を渡したことにより順番に実行されるscriptにもそれぞれ --version の引数が渡り、nodeとnpmのバージョンが出力されました。
最後に、用途が限定的だとは思いますがまとめて実行するscriptにそれぞれ異なる引数を渡したい場合は以下のようにします。

bash_____terminal_____$ yarn script-in-order -v --version
yarn run v1.22.19
$ run-s "script:node {1}" "script:npm {2}" -- -v --version
$ node -v
v16.15.1
$ npm --version
8.11.0
✨  Done in 1.00s.

出力結果的にはそれぞれのバージョンが出力されているというところは先ほどと変わりませんが script:node には -v 、 script:npm には --version の引数が渡されていることがわかります。

まとめ

npm-run-allを使うと複数のscriptをまとめて実行できるだけでなく、scriptを分けて定義できるのでそれぞれをよりシンプルなscriptとして定義できます。