package.jsonのscriptタグでの同時実行の方法

package.jsonのscriptタグでの同時実行の方法

package.jsonのscriptの中で、1つのscriptの中で複数のコマンドを実行したい時の書き方について。
順番に処理させたい時と並列で処理させたい時に記述方法が微妙に違ってハマったので備忘録。

結論から

1つのscriptの中で複数のコマンドを順番に処理させたい時(シーケンシャル)

&&で繋ぐ

1つのscriptの中で複数のコマンドを並列に処理させたい時(パラレル)

&で繋ぐ

例えばこんなpackage.jsonがあるとする。
(create-react-appで最初に作られるpackage.jsonのscript)

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  ...
}

この時、testとbuildを1つのコマンドで「順番」に実行したい場合は以下のようにscriptに追加する

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject",
    "add_script": "yarn test && yarn build"
  },
  ...
}

testとbuildを1つのコマンドで「並列」に実行したい場合は以下のようにscriptに追加する

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject",
    "add_script": "yarn test & yarn build"
  },
  ...
}

どのように使い分けるか?

シーケンス

上の例のように、testからbuildの流れで実行したい時。
testでfailするとbuildコマンドは実行されない。

パラレル

例えばプロジェクトがmonorepo(複数のプロジェクトを一つにまとめている)で、複数のbuildを並行して行いたい時。

{
  ...
  "scripts": {
    "prj1_build": "yarn workspace prj1 react-scripts build",
    "prj2_build": "yarn workspace prj2 react-scripts build",
    "multi_build": "yarn prj1_build & yarn prj2_build"
  },
  ...
}

仮に1つ目のコマンドが失敗しても、2つ目のコマンドは実行される。

参考

Running NPM scripts sequentially

プログラミングカテゴリの最新記事