207
186

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

npm scriptsを使おう

Last updated at Posted at 2016-08-21

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

207
186
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
207
186

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?