LoginSignup
515
464

More than 5 years have passed since last update.

npm-scripts で使える便利モジュールたち

Last updated at Posted at 2016-02-07

npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。
本体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。

npm-scripts には以下の特徴があります。

  • 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。
  • 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。
  • 複雑なことをするには向いていないです。
  • 環境変数の扱いに難があります。

この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。
汎用的なものを集めました。

npm-run-all

複数のタスクを並列・直列にまとめて実行する便利ツールです。
Glob のようなパターンマッチを使うことができます (Glob との違いは、区切り文字が/ではなく:であることです)。

$ npm-run-all foo bar baz
$ npm-run-all build:*
$ npm-run-all --parallel watch:*

$ run-s build:*  # "npm-run-all build:*" と同じです
$ run-p watch:*  # "npm-run-all --parallel watch:*" と同じです

また、cmd.exe と sh とで挙動が違う & の代わりに使うことができます。

cross-env

環境変数を設定しつつ指定したコマンドを実行するツールです。

$ cross-env NODE_ENV=production babel src --out-dir lib
$ cross-env NODE_ENV=development babel src --out-dir lib --source-maps inline --watch

環境変数を設定する方法は cmd.exe と sh とで異なっていますが、cross-envはクロスプラットフォームで動作します。

chokidar-cli

ファイルの変更を監視して、ファイル変更時に任意のコマンドを実行するツールです。
監視機構を内蔵していない CLI ツールと併用すると便利です。

$ chokidar "lib/**/*.js" --command "eslint lib"

opener

ブラウザを開くツールです。
URL, 相対パスを指定できます。
また、どのブラウザで開くかも指定できます。

$ opener http://localhost:8080
$ opener ./coverage/lcov-report/index.html
$ opener chrome http://www.google.com

wait-on

指定したファイル・URL・TCP ソケット等が使えるようになるまで待機するツールです。
前述の opener と組み合わせると便利です。

{
    "start":        "npm-run-all --parallel start:*",
    "start:server": "node-dev server.js",
    "start:client": "wait-on http://localhost:8080 && opener http://localhost:8080"
}

cpx

指定したファイル群を、ディレクトリ構造を保ったままコピーするツールです。
変更監視して変更時だけコピーすることもできます。

$ cpx "src/**/*.js" app --watch

# Browserify 互換の変換モジュールを噛ませることができます。
$ cpx "src/**/*.js" app -t hogehogefy --watch

if-node-version

実行している Node.js のバージョンが指定したものだったときだけ後続するコマンドを実行します。

$ if-node-version ">=4" eslint lib

バージョンの指定は package.json で使うのと同じ semver 範囲指定で行います。

rimraf

rm -rf を実行するツールです。
Windows のお供に。

$ rimraf dist coverage

私はよく npm run clean を書くために使います。

mkdirp

mkdir -p を実行するツールです。
Windows のお供に。

$ mkdirp app/client app/server

shelljs

複雑なことを実施したい場合には、ShellJS を利用するのがお手軽です。
Gulp のようなものを使ってもいいですが、ShellJS は CLI がそのまま使えるのでメンテ不安が少ないです。

515
464
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
515
464