Help us understand the problem. What is going on with this article?

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

liply
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away