npm-scripts:スクリプトの実行内容を別ファイルに記述して実行させる方法

npm-scripts:スクリプトの実行内容を別ファイルに記述して実行させる方法

npm-scripts使用する際にpackage.jsonへ実行内容を記述するのではなく、別ファイルに内容を記述して実行させる方法です。
可読性が悪いのを解消したいときやオプションや複雑な処理が多くてコメントなどを残しておきたいときに使えます。

npm-scriptsを使用する際はpackage.jsonに実行内容をワンライナーで記述していくので、行いたい処理やオプション指定が多いとどうしても可読性が悪くなってきます。
その解消方法として無理にワンライナーでおさめようとせずに処理を細かく分けて並列または直列で実行させるという方法を用いる人も多いと思いますが、いっそのことその処理を別ファイルに記述して実行させるという方法もあります。

ここでは例として「Browsersync」を使う想定だったときで、package.jsonに記述する場合はワンライナーで下記のような記述になると思います。

package.json

"scripts": {
  "server": "browser-sync start -f './dist/' -s './dist/' --port 3000 --no-ghost-mode --open='external' --no-notify"
}

この処理を別ファイルに記述したい場合は、下記のように記述したJSファイルを作成して任意の場所に配置し、ここではpackage.jsonと同じ階層にserver.jsというファイル名で配置します。

server.js

const browserSync = require('browser-sync');

browserSync({
  files: './dist',
  server: './dist',
  port: 3000,
  ghostMode: false,
  open: 'external',
  notify: false,
});

あとはファイルを実行するためにpackage.jsonにはスクリプト部分をnode 実行するファイル名という形で記述し、このサンプルの場合は記述後に$npm run serverを実行すればBrowsersyncが動作するのを確認できます。

package.json

"scripts": {
  "server": "node server.js"
}

この方法を利用することでpackage.jsonだけで処理内容をすべて把握できないとか環境のために必要なファイルが増えるというデメリットは出てきますが、それよりも処理内容の可読性とか後で自分が見返す際や他メンバー向けにコメントを入れておく方が重要な場合には試してみてください。

Close the search window,
please press close button or esc key.