package.jsonのscriptsにnpm runを「&&」や「;」で連結はダメ

scriptsにnpm runを「&&」や「;」で連結

とあるpackage.jsonを見ていたら&&でnpm runを連結しているコードがあった。

以下は実際のpackage.jsonではないがこのようなイメージ。

{
  "scripts": {
    "start": "npm run foo && npm run bar && npm run baz",
    "foo": "echo 'foo'",
    "bar": "echo 'bar'",
    "baz": "echo 'baz'"
  }
}

「&&」や「;」で連結すると見づらい

「&&」や「;」で連結すると見づらいし、パラレルで実行しても良い処理の場合は実行時間も無駄にかかるので、このようなケースの場合はnpm-run-allを使用したほうが良い。

npm-run-allとは

複数のpackage.json内のscriptsを実行できるコマンドラインツール。

使い方は「npm i -D npm-run-all」でインストールしたあと「run-s (sequence)」または「run-p (parallel)」で以下のように書くだけ。

前述よりもだいぶ可読性が向上しているのがわかる。

{
  "scripts": {
    "start": "run-s foo bar baz",
    "foo": "echo 'foo'",
    "bar": "echo 'bar'",
    "baz": "echo 'baz'"
  }
}

タスク名を「:」で区切ればさらに短く書ける。

{
  "scripts": {
    "start": "run-s start:*",
    "start:foo": "echo 'foo'",
    "start:bar": "echo 'bar'",
    "start:baz": "echo 'baz'"
  }
}

npm-run-all - npm