CLIでの環境構築記事は巷に溢れていますが、
実際に自分で環境構築した時に躓いた点を書き留めておきたいと思います。
今回はその中でも一番最初のインストール時に疑問に感じたグローバルインストールとローカルインストールについてです。
※こちらの記事は開発環境初心者向けの記事になりますので、バリバリ開発環境構築してるぜ！という方は、記事に対するツッコミや補足をお願いいたしますm(_ _)m
※本記事は小規模〜中規模サイトの環境構築を想定しています。
※シンプル、最低限の環境作成を目標としているため、gulp、webpack、parcelは使用しません。
npmって？？
npmとはNode Package Managerの略です。
Node.jsのライブラリや、パッッケージを管理することができます。
プロジェクトによってはFacebookが開発したJavaScriptパッケージマネージャーのYarnが使われる事もあります。
関連リンク：
npm互換のJavaScriptパッケージマネージャーYarn入門
グローバルインストール？ローカルインストール？
CLIの環境構築を勉強していて、最初に「？」となったのが、
グローバルインストールとローカルインストールについてでした。
参考にしている記事によってはグローバルインストールさせている記事もありますし、ローカルインストールの記事もありますし、バラバラです。
#グローバルインストール
$ npm i -g ejs
この場合、package.jsonに記載されません。
そしてインストール場所もグローバルとローカルで違います。
↓下記のコマンドを打ってみましょう。
#グローバルインストールされているものを確認
$ npm list -g
「/Users/uu123089/.nodebrew/node/v5.6.0/lib」
モジュールがインストールされる場所と、既にグローバルインストールされているモジュールがあれば、そのモジュールが表示されているはずです。
ここにインストールされたモジュールは各ディレクトリでコマンドを打って使用することができます。
#コマンド実行例
ejs-cli "*.ejs" --out dest/ --options data.json
ではローカルインストールはどうでしょうか？
#ローカルインストール
$ npm i -D ejs-cli
#↓省略しない場合
$ npm install --save-dev ejs-cli
こちらのコマンドをカレントディレクトリで打つと、package.jsonと同じ階層に
「node_modules」というディレクトリが作成され、その中に、インストールしたモジュールが入ります。
※実行する場合はnpm init でpackage.jsonを作成した後で実行してください。
※npm init については次のstep1の記事で解説いたします。
では先ほどと同じコマンドで実行すると・・・
#コマンド実行例
ejs-cli "*.ejs" --out dest/ --options data.json
「-bash: ejs-cli: command not found」
が表示されます。
ローカルインストールした場合、インストール先がグローバルと異なるため、
パスが通っておらずエラーになってしまうのです。
下記のコマンドのようにパスを指定すれば実行ができます。
./node_modules/.bin/ejs-cli "*.ejs" --out dest/ --options data.json
なんだか、ローカルインストールは不便に思えてきますね。
でも、環境構築するにはローカルインストールの方がメリットがあるのです。
1.他の環境に引っ越し、他のプロジェクトでの使い回しがしやすくなる
まず一つ目のポイントについてですが、ローカルインストールでインストールした場合、package.jsonにインストールされたモジュールが記載されました。
このモジュールが記載されたpackage.jsonをディレクトリに配置し、
npm i
をするとインストールしながらpackage.jsonを作成した時と同じ環境がコマンド一つで作成できるのです。
これは他のプロジェクトで使い回すのもそうですが、
複数人で開発環境を揃えるのにも役立ちます。
グローバル環境でインストールされた環境ですと、人によってインストールされてないものがあったり、バージョンが差異が出てエラーになってしまったり、開発をスムーズに行うことができません。
2.グローバル環境を汚染しない
ローカルインストールされたものはプロジェクトディレクトリの中の「node_modules」というディレクトリにインストールされるため、グローバル環境を綺麗に保てます。
ここで一つ問題がありました。
パスの問題です。
その問題はnpm scriptsで解決できます。
npm scriptsって？
package.json内のscriptsフィールドにシェルスクリプトやエイリアスコマンドを登録することができます。
~省略
"scripts": {
"build:html": "ejs-cli *.ejs --out dest/ --options data.json"
},
普段使っているプロジェクトのpackage.jsonを開くと、このような記述があるかと思います。
ここに登録したコマンドはパスを通して実行されるのです。（「./node_modules/.bin/」の記述が不要になります。便利ですね！）
登録したコマンドは
$ npm run 〇〇○←登録したタスク名
で実行できます。
今回の記事では
・npmについて
・ローカルインストールとグローバルインストールの違い
・npm scripts
の3点について触れました。