Edited at

npm scriptsを使おう

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)で実行しましょう。