npm-scripts-info で npm-scripts の説明書きを書く

以前 Gulp スクリプトの説明書きが書ける「Gulp-Description」という npm パッケージを紹介した。

• Gulp-Description で Gulp タスクの説明書きを追加する

今回はこれの npm-scripts 版といえる、npm-scripts-info というパッケージを紹介する。

• npm-scripts-info

まずはインストール。

$ npm install npm-scripts-info -D

説明書きを追加するやり方はいくつかあって、一つは package.json に scripts-info というプロパティを作るというもの。

{
  "name": "my-project",
  "scripts": {
    "info": "npm-scripts-info"
  },
  "scripts-info": {
    "info": "Displays information about the scripts.",
    "watch:build": "Compiles the scripts and watches for changes.",
    "start": "Kickstarts the application."
  }
}

このようにして npm run info を実行すると、scripts-info に書いたタスク名とその説明が表示される。

もう一つのやり方は、scripts の中に ?【タスク名】 と書く方法。

{
  "name": "my-project",
  "scripts": {
    "?info": "Display information about the scripts.",
    "info": "npm-scripts-info",
    
    "?watch:build": "Watch codebase, trigger build when source code changes",
    "watch:build": "webpack --watch",
    
    "?start": "echo Kickstarts the application.",
    "start": "node index"
  }
}

このようにしておいて npm run info とやると、?info・?watch:build・?start の値を説明文として info・watch:build・start タスクの説明が表示される。

?start の先頭に echo の文字列があるが、これは npm run info したときに表示されない。npm run ?start と叩いた時にターミナルの echo コマンドを使って説明文が表示できるようにしてあるのだ。

個人的には ?【タスク名】 の方が、タスクと説明文が近いのでメンテナブルかなぁと思っている。