npm install -g はやめる

WebpackやGulp、Angularなど多くのNode.js製のツールを最近のWeb開発ではよく使うが、それぞれプロジェクトごとに基本的にはバージョンが違う。

にも関わらず、それらのツールの公式サイトには、まずそのツールを使うには、以下のように-gを付けてグローバルにインストールしろ、といったインストール方法が多く書かれている。

npm install -g xxxxxx

手っ取り早く使い始める分にはいいかもしれないが、複数のプロジェクトが存在する開発者のローカル開発環境には、以下の理由から向いていない。

グローバルにNode.jsのツールをインストールすると、複数のプロジェクトでバージョンを固定できない。
グローバルにインストールしたNode.jsツールのライブラリー間でバージョンの競合が起こりうる。
そして、グローバルにインストールしなくてもそのツールは使える。

グローバルにインストールせずにNode.js製のアプリケーションを使う方法

npm scriptを利用することで、グローバルにインストールしなくてもNode.js製のツールを使うことができる。

Webpackを利用する場合の例

(Node.jsがインストールされていて、npmコマンドが使える前提で書く）

もし、プロジェクトのディレクトリにpackage.jsonが存在しない場合、npm init -yで作成する。デフォルトのNode.jsプロジェクトとして初期化され、package.jsonが生成される。

Webpackをインストールする

npm install --save-dev webpack

プロジェクトにインストールしたNode.js製のツールは、node_modulesディレクトリ配下にインストールされる。これらを実行する場合、このようにパスを直接指定しても実行できる。

./node_modules/.bin/webpack

npm scriptを追加する

上記のようにパスを直接指定してもツールの実行はできるが、npm scriptを使ったほうが便利に実行できる。プロジェクトディレクトリのpackage.jsonのscriptセクションにwebpack実行用のbuildスクリプトを追加する。

{
  "name": "webpack-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack" // <- これ
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    // 割愛
  },
  "dependencies": {
    // 割愛
  }
}

npm scriptでは、プロジェクトにインストールしたNode.js製ツールの実行ファイルのディレクトリ(node_modules/.bin)にパスが通った状態でツールを実行するコマンドを書ける。

上記のnpm scriptのbuildスクリプトに指定したwebpackコマンドは、実際は./node_modules/.bin/webpackが実行される。

npm scriptを実行してみる

npm scriptを実行する時はnpm run xxxxの形式で実行する。上記のbuildコマンドの場合、npm run buildになる。

実際に実行してみると、webpackコマンドを実行できていることがわかる。

$ npm run build

Hash: 40085d111b680e76b184
Version: webpack 3.10.0
Time: 1988ms
        Asset       Size  Chunks                    Chunk Names
app.bundle.js    1.48 MB       0  [emitted]  [big]  app
   index.html  274 bytes          [emitted]         
   [0] ./src/index.js 598 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
   [4] ./src/style.css 1.01 kB {0} [built]
   [5] ./node_modules/css-loader!./src/style.css 233 bytes {0} [built]
   [9] ./src/print.js 164 bytes {0} [built]
    + 4 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 580 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 1 hidden module

npm scriptの中には、npm runとnpmにrunを続けずに、そのまま実行できるものもある。 npm startやnpm testがこれに当たる。 (runを省略できるコマンドの詳細はドキュメント)を参照。)

npm run スクリプトにオプションを指定したい場合

例えば、webpack --watchなど、オプションを指定したい場合もある。この場合、登録したnpm scriptに--続けてオプションを入力することで実行できる。

npm run build -- --watch

> webpack-sample@1.0.0 build /Users/xxxxxx/yyyyyyyyyyy
> webpack "--watch"


Webpack is watching the files…

よく使うオプションであれば、オプションを指定したnpm scriptを登録するのがいい。

  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  // 割愛

オプションを指定する場合でもnpm scriptに登録しておけば楽に実行できる。

npm run watch

まとめ

プロジェクトごとに利用するNode.jsのツールは、グローバルにインストールしなくてもnpm scriptを使うことで利用できる。
プロジェクトごとにインストールすることで、プロジェクト間のツールのバージョンの競合を避けられる。
npm scriptで、ツールのオプションを指定した状態で登録できる。