package.json内にscriptsの記述を設定する（npm-scripts）

• facebook

オフィス狛 技術部のHammarです。

node.jsを使った開発を行う時に、JavaScriptライブラリのパッケージマネージャーであるnpmを使いますが、このnpmにはプロジェクトの情報管理ファイルであるpackege.jsonがあります。
基本的なpackege.jsonの記載方法については割愛しますが、このpackege.json内にscriptsという記述を設定することによって、独自のコマンドを設定することができます。
これによって、例えばローカルサーバーの起動や停止等、良く使うコマンドを設定しておけば、いろいろコマンドを打たずに済むといった感じになります。

例えばAngularの開発では、package.jsonには下記のようにscriptsの記載したりします。

  "scripts": {
    "start": "ng serve",
    "test": "ng test",
    "build": "ng build",
    "copy": "cpx ./dist/* ../server/",
    "precommit": "lint-staged",
    "ng": "ng",
  },

とscripts内にいくつかのコマンドを設定しておきます。そして、

$ npm run [スクリプト名]

と打てば上記で設定したコマンドが実行されます。
よく使うコマンドは独自に作っておけば結構楽な場合があります。

また、上記scriptsには予約語があり、start、stop、restart、testが予約語として用意されています。
なので、たとえばstartのスクリプトを実行するときは、npm run startと打たなくても

$ npm start

とコマンドを打つだけで実行可能です。

もっと細かくいろいろ設定したりもできます。
たとえばscriptsに記述したコマンドを複数一気に実行したい場合、以下のようにscript内に記述しておきます。

  "scripts": {
    "start": "ng serve",
    "test": "ng test",
    "all": "run-s build copy",  // 追加
    "build": "ng build",
    "copy": "cpx ./dist/* ../server/",
    "precommit": "lint-staged",
    "ng": "ng",
  },

そして、上記スクリプト名の"all"を

$ npm run all

と実行すれば、"build"と"copy"というスクリプトが実行されます。

    "all": "run-s build copy"

の記述の run-s というコマンドが、複数実行で直列に実行するnpm-run-allのショートカットの意味で、指定したスクリプトを順番に実行してくれます。
また、応用で run-p というコマンドもあるのですが、こちらも複数実行ですが、スクリプトを並列に実行するコマンドになります。

上記以外にももっといろいろ細かく設定できるようなのですが、まずは上記のような設定で、ライトに使い始めてもいいかなと思いました。