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のスクリプト例に使わせていただきました。