npm-scriptsをnpm-run-allで用途や環境毎に書く際の小技

• Web開発の際のタスク処理として、package.json内に記述して利用できるnpm-scriptsを利用しています。
• またその際に、複数処理の直列化や並列化に便利なnpm-run-allを利用しています。
• 今回はそれを用いた用途や環境毎への記述を、明確かつ柔軟にする方法を記録します。

結果

• 先に結果の記述を示します。以下の通りです。

{
  "scripts": {
    "build"      : "run-s build:{sass,ts}",
    "build:sass" : "sass input.scss output.css",
    "build:ts"   : "tsc main.ts",
    "watch"      : "run-s watch:{sass,ts}",
    "watch:sass" : "sass --watch input.scss output.css",
    "watch:ts"   : "tsc -w main.ts"
  }
}

内容

• 上記の結果例は、主にbuildとwatchを行うタスクです。
• こちらで利用している方法は、処理内容を波括弧で指定するということです。

波括弧での指定

• コロン(:)で用途毎に分けたタスクを一回で実行する際には、以下のようなやり方があります。

{
  "scripts": {
    "build-basic" : "run-s build:sass build:ts",
    "build-glob"  : "run-s build:*",
    "build-brace" : "run-s build:{sass,ts}",
    "build:sass"  : "sass input.scss output.css",
    "build:ts"    : "tsc main.ts",
  }
}

• これらから私はbuild-braceのような波括弧で指定した方法を利用しています。
• そのメリットは以下の通りです。
  • 非重複
    • run-s build:sass build:tsのように言葉の重複が無く、今後同一のタスクが増えても、用途の記述だけで済む。
  • 明示化
    • run-s build:*のようなアスタリスク指定と比べて、明示的に記述されているため、処理の内容が理解しやすい。
  • 順序化
    • 波括弧内の順に処理を行ってくれるため、仮にpackage.json内でbuild:sassとbuild:tsを逆に記述しても問題無い。
      • run-s build:*での指定では、処理順番がpackage.json内の並び通りに行われるため、逆に記載してしまうとその順になってしまう。

まとめ

• 上記のことから、タスクやscript記述においても可読性・明示化・非重複性を再認識しました。

参考

• npm-run-all
• https://www.mitsue.co.jp/knowledge/blog/frontend/202004/14_1408.html
  • package.jsonのスクリプト例に使わせていただきました。