JavaScript
npm
npm-scripts

npm scriptsを使おう

More than 1 year has passed since last update.

npm < 僕と契約してnpm scriptsおじさんになってよ!!

タスクランナーとしてnpm scriptsを使おうという入門&忘備録記事です。

なぜnpm scriptsか

なぜGulp等ではなくてnpm scriptsなのでしょう。

簡単

Gulpの構築コストは意外に高いです。
また、一枚抽象レイヤーを導入するわけで、

  • そのレイヤーが安定度
  • そのレイヤーの仕様変更
  • そのレイヤーのプラグインの安定度

に非常に振り回されます。
それならシェル叩いたほうがいいのでは?という発想で、実際それで困ることはあまりないよ、という話です。

npm scriptsの機能

インストールしたパッケージのCLIを起動

npm i -D rollup
とすると、当然ながらコマンドラインからrollupをたたくことはできません。
npm i -g rollup
というようにグローバルインストールする必要があります。ですが、これを強要するのは環境破壊につながるので、あまりよろしくありません。
しかしなんと、ローカルインストールしたライブラリのCLIは、npm scriptsからは叩けるのです。よって
"build": "rollup -c rollup.config.js"
と書けば、
npm run build
とすればrollupを起動することが可能なのです!とても便利です。

Config

package.jsonに
"config": { hoge: "rollup.config.js" }
と記述すると、環境変数としてnpm_package_config_hogeが渡されます。

Passing Arguments

-- 以降の引数をnpm scriptsに送ります。
例えば、
"hoge": "rollup -c"
というscriptsが記述されている場合、
npm run hoge -- rollup.config.js
というコマンドをたたくと
rollup -c rollup.config.js
というコマンドが実行されます。

npm test/start/stop

この三つのスクリプトのみ、runを省略できます。 npm test のように書けるわけです。

pre/post hook

特定コマンド実行前・実行後に起動するscriptsを記述できます。
"postinstall": "rollup -c rollup.config.js"
と書き、
npm install
というコマンドをたたくと、postinstallスクリプトが、インストール処理実行後起動します。

npm scriptsおじさんになるときに躓きそうなもろもろ

  • Win/Macで使えるコマンドが違う

代用できるコマンドがnpmパッケージとして存在するので、それを使いましょう。大抵あります。
cp -> cpx
rm -rf -> rmraf
mkdir -p -> mkidirp
どうしてもめんどくさいならShelljsを使うのも手です。

  • Watchしたい

専用のパッケージがあります、後述します。

npm scriptおじさんになるための三種の神器

npm-run-all/run-p/run-s

指定したnpm scriptsを並列、直列実行する、とても強力なパッケージです。
これがあるからnpm scriptsが実用できるといっても過言ではないです。

使い方は簡単、
run-s scriptName1 scriptName2で直列実行、
run-p scriptName1 scriptName2で並列実行です。

またワイルドカード指定もできて、
run-p watch:*
とすると、watch:hoge、watach:fuga ... を並列で実行できます。

このパッケージによって、ワンライナーを長々と書く必要がなくなります。
ワイルドカード指定とともに、うまく使いたいですね。

watch

特定ディレクトリを監視して、シェルスクリプトを実行します。
これも使い方は簡単、
watch 'npm run hoge' ./dirname
以上!

Node.js(!)

はい、Node.jsです。

node script.js

でNode.jsの全機能を使えます。
当たり前ですが、とても柔軟です。
Webpackやrollup等のビルドツールはNode.jsで直接叩くためのAPIを備えていますが、直接扱うのは結構辛みなので、shelljs等を併用するとよいかもしれません。

諸問題

ちょっと運用で気を付けないといけないことがあります。

環境変数展開

Macだと$npm_package_config_hoge、Winだと%npm_package_config_hoge%で展開できます。なので互換性がありません……

単一責任原則

npm scriptsに長いワンライナーを描かないようにしましょう。保守が非常に大変です。
単一の機能を実現するnpm scriptsに分解して、run-s(run-p)で実行しましょう。