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

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

More than 3 years have passed since last update.

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 がそのまま使えるのでメンテ不安が少ないです。

mysticatea
ESLint のメンテナ。Vue.js の開発チームメンバー。JavaScript 言語仕様書 ECMA-262 や JavaScript 構文解析器 Acorn のコントリビューター。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした