Zenn
👂

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

2020/09/28に公開
JavaScript
Node.js
npm
Web
tech
  • 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記述においても可読性・明示化・非重複性を再認識しました。

参考

Discussion