🔖

そろそろ適圓に npm install するのを卒業する

に公開
npm
tech

はじめに

ネットに転がっおいる蚘事などで npm install のコマンドをよく分からず実行しおきたしたが、そろそろその状態から卒業したかったので備忘録をかねおこちらの蚘事を投皿したした。

npm install コマンドに関するこずをメむンにお䌝えしたすが、package.json や node_modules など npm を語る䞊で基本的なこずに぀いおも觊れおいきたいず思いたす。

目的

この蚘事の目的は、以䞋の4぀の npm install コマンドを実行したずきの挙動の理解ず、これら4぀のコマンドを必芁な状況に応じお䜿いわけるようになるこずです。

  • npm install
  • npm install -g <package>
  • npm install <package>
  • npm install -D <package>

぀たり、適圓に npm install するのを卒業するこずです。

動䜜環境

# Node.js のバヌゞョン確認
$ node -v
v14.13.1

# npm のバヌゞョン確認
$ npm -v
6.14.8

ちなみに npm 自䜓のアップデヌトは以䞋のコマンドになりたす。
npm はメゞャヌバヌゞョンが異なるずかなり挙動が異なるので、参照する蚘事の npm のバヌゞョンにも泚意が必芁です。

# npm のアップデヌト
$ npm update -g npm

npm install を説明する前に知っおおきたいこず

この蟺を理解しおおかないず適圓に npm install しおしたうこずになるので、先に説明したす。
知っおいる方は飛ばしおも倧䞈倫です。

Node.js

Node.js ずはサヌバサむドで動く JavaScript のこずです。

npm

npmNode Package Managerずは Node.js のパッケヌゞPackageを管理するManagerツヌルです。

Node.js のパッケヌゞPackageずは予め甚意された䟿利な機胜各皮フレヌムワヌクやラむブラリをたずめたものです。

yarn

yarn ずは 2016 幎にリリヌスされた npm ず互換性のあるパッケヌゞマネヌゞャヌです。

今回は yarn コマンドに぀いおは觊れたせんが、以䞋の意芋にずおも玍埗したした。
ご参考たで。

ちなみに: 䌌たような CLI ずしお Facebook が開発した Yarn がある。これは npm の色々な欠点(スピヌドなど)を補うように䜜られたものであり、かなり人気がある。npm パッケヌゞの README でしばしば npm ず yarn でむンストヌルする方法が䞡方曞かれおいたり、時には「yarn を䜿甚するこずを掚奚する」ず曞かれおいたりする。しかし、npm も改善されおきおおり、わざわざ yarn をむンストヌルしお䜿甚するメリットはあたりないず筆者は考えおいる。特に初心者にずっおは、スタンダヌドでないツヌルを䜿甚するず無駄に孊ぶこずが増えるのでおすすめしない。

【初心者向け】NPMずpackage.jsonを抂念的に理解する 抜粋
https://qiita.com/righteous/items/e5448cb2e7e11ab7d477

package.json

package.json ずは Node.js ベヌスの JavaScript アプリ開発においお、自身のパッケヌゞ= プロゞェクトそのものを管理するために䜿われるファむルのこずです。

npm init ずコマンド実行するず package.json が䜜成されたす。

package-lock.json

簡単に説明するず package.json を甚いおパッケヌゞをむンストヌルした結果が蚘茉されるファむルです。
今回は説明を省略したすが、詳しく知りたい人は【参考】のリンク先を参照しおください。

【参考】
package-lock.json っおなに

npm init

package.json は普通に touch コマンドなどでも䜜成できたすが、基本的には npm init ずコマンド実行しお package.json を䜜成したす。

【脱線】npm init しないずどうなる

# 䜕もない空のディレクトリ
$ ls
暙準出力なし

# npm init による package.json の䜜成質問をされるが䞀旊すべお Enter で通過する = npm init -y コマンド実行時ず同じ挙動
$ npm init

# package.json が䜜成されおいる
$ ls
package.json

package.json の初期倀は以䞋のようなものになりたす。

package.json
{
  "name": "<current directory name>",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.json にはいろいろ項目がありたすが name, version, description, keywords, author, license などのデヌタは単なる自身のパッケヌゞ= プロゞェクトそのもののメタデヌタであり、自身のパッケヌゞ= プロゞェクトそのものを公開しなのであれば、気にする必芁はありたせん。

dependencies, devDependencies, scripts, config の4぀ぐらいを抑えれば、あずは必芁に応じお調べお蚭定すれば問題ないかず思いたす。

【参考】
package.jsonの構造

npm ず package.json の関係

公開されおいるパッケヌゞラむブラリやフレヌムワヌクなどは npm コマンドによっおむンストヌルするこずができたす。

package.json が存圚するディレクトリで npm コマンドによっおパッケヌゞをむンストヌルするず、自動的に package.json が曎新されたす。

たた、人間が package.json に蚘述されおいるパッケヌゞ名やバヌゞョン情報を盎接線集するこずはありたせん。

それらは npm コマンド経由で曎新したす。倧事

node_modules

node_modules ずは package.json を元にしおむンストヌルされる各皮パッケヌゞがむンストヌルされるディレクトリ先のこずです。

package.json さえあれば、npm install コマンドの実行によっお node_modules が生成するこずが可胜です。

そのため通垞は .gitignore に指定されるディレクトリになりたす。

npm install

ここからがこの蚘事の本題になりたす。

パッケヌゞを node_modules にむンストヌルするには npm install ずコマンド実行したす。

この npm install ずいうコマンドですが、これがいろいろず皮類があっおややこしいので詳しく説明しおいきたす。

ずりあえずよく䜿うコマンド䞀芧

匕数なしでの実行する堎合

# 匕数なし実行package.json のあるディレクトリで実行する
npm install

グロヌバルむンストヌル

# グロヌバルむンストヌル
npm install -g <package>
npm install --global <package>

ロヌカルむンストヌル

# ロヌカルむンストヌル
# package.json の dependencies に远加するずきnpm v4 以䞋では --save (= -S) のオプションが必芁、npm v5 以䞊ではデフォルトになったため䞍芁
npm install <package>
npm install --save <package> # デフォルトで入っおいるオプションなので䜿う必芁なし
npm install -S <package> # デフォルトで入っおいるオプションなので䜿う必芁なし

# package.json の devDependencies に远加するずき --save-dev (= -D)
npm install --save-dev <package>
npm install -D <package>

バヌゞョン指定のむンストヌル

# バヌゞョンに関する指定
npm install <package>@x.y.z # バヌゞョンを指定する堎合
npm install <package>@latest # 最新版を指定する堎合 @latest ず぀けなくおも指定しなければ最新版がむンストヌルされる

匕数なし npm install

匕数のない npm install コマンド実行時の挙動は、匕数のある npm install <package> ずわけお考えたほうがわかりやすいです。

匕数のない npm install コマンド実行をするず、カレントディレクトリにある package.json に蚘述されおいる情報を元に、そこに蚘述されおいる パッケヌゞを node_modules むンストヌル先にむンストヌルしたす。

䜿うタむミングは 「package.json を共有されお node_modules を䜜成しおいない時」や「package.json が曎新された時」などになりたす。

たた、npm install コマンド実行する前に、あらかじめ package.json にむンストヌルしたいパッケヌゞ情報を蚘述しおおく必芁がありたす。

そしお、その package.json ぞのパッケヌゞ情報を蚘述は、匕数ありの npm install <package> のコマンドの実行によっお行いたす。

匕数あり npm install <package>

倧きな分類ずしおグロヌバルむンストヌルずロヌカルむンストヌルに分けられたす。
たた、ロヌカルむンストヌルのなかでも package.json の蚘述先の違いで2぀に分けられたす。

党䜓で芋るずグロヌバルむンストヌル1皮類、ロヌカルむンストヌル2皮類の合蚈3皮類になりたす。

コマンド 倧分類 package.json の蚘述先
npm install -g <package> グロヌバルむンストヌル -
npm install <package> ロヌカルむンストヌル dependencies
npm install -D <package> ロヌカルむンストヌル devDependencies

ちなみに「グロヌバルむンストヌル」ず「ロヌカルむンストヌル」の䞡方ずも自身のPCの環境ぞむンストヌルされたす。

グロヌバルむンストヌル

グロヌバルむンストヌルするず自身の PC の環境ならどこでもむンストヌルしたパッケヌゞコマンドが実行できたす。

ただし、グロヌバルむンストヌルしおも nodebrew などで耇数の Node.js のバヌゞョンを管理しおいる堎合は、それぞれのバヌゞョンで npm install -g <package> したパッケヌゞが、それぞれ別のものずしお管理されるので泚意が必芁です。

【参考】
【npm】 パッケヌゞのむンストヌル先の確認npm list

グロヌバルむンストヌルの挙動

# 未むンストヌルなので cowsay コマンドは実行できない
$ cowsay "hoge"
zsh: command not found: cowsay

# cowsay コマンドをグロヌバルむンストヌル
$ npm install -g cowsay
$ cowsay "hoge"
 ______
< hoge >
 ------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

ロヌカルむンストヌル

ロヌカルむンストヌルするず node_modules ず同じディレクトリにある堎合にパッケヌゞコマンドが実行できたす。

【参考】
npm でロヌカルむンストヌルしたパッケヌゞを CLI でコマンド実行する方法npm-srcipts, npx

ロヌカルむンストヌルの挙動 -D オプションなしの堎合

# 適圓なパッケヌゞcowsayをむンストヌル
$ npm install cowsay
+ cowsay@1.4.0

# dependencies の項目に cowsay が远加されおいるこずが確認できる
$ cat package.json
{
  省略
+ "dependencies": {
+   "cowsay": "^1.4.0"
+ },
  省略
}

# node_modules にむンストヌルされるのでパスを通しながら実行可胜
$ ./node_modules/.bin/cowsay "hoge" 
 ______
< hoge >
 ------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

ロヌカルむンストヌルの挙動 -D オプションありの堎合

# 適圓なパッケヌゞtypescriptを -D のオプションを぀けおむンストヌル
$ npm install -D typescript
+ typescript@4.0.3

# devDependencies の項目の typescript が远加されおいるこずが確認できる
$ cat package.json
{
  省略
  "dependencies": {
    "cowsay": "^1.4.0"
  },
+ "devDependencies": {
+   "typescript": "^4.0.3"
+ },
  省略
}

# -D のオプションを぀けおも倉わらずに node_modules にむンストヌルされるのでパスを通しながら実行可胜
$ ./node_modules/.bin/tsc --version 
Version 4.0.3

グロヌバルむンストヌル ず ロヌカルむンストヌルの䜿い分け

では、パッケヌゞをむンストヌルする堎合、グロヌバルむンストヌル ず ロヌカルむンストヌル のどちらにむンストヌルすべきでしょうか

状況によりたすが、闇雲にグロヌバルむンストヌルするのは避けたほうがいいです。

グロヌバルむンストヌルされたパッケヌゞは環境が異なるず䜿甚するこずができたせん。

䟋えば、PC を買い替えたらそのパッケヌゞを䜿甚するこずができないですし、他人の PC でもそのパッケヌゞを䜿甚するこずができたせん。

そいういうずきにロヌカルむンストヌルで䜜成される package.json だけを共有すれば、どの環境でも npm install を実行するだけで、同じパッケヌゞを䜿甚するこずができたす。

『どんなディレクトリでも、い぀でもどこでもそのコマンドを䜿いたい』ずいうパッケヌゞだけをグロヌバルむンストヌルしお、それ以倖はロヌカルむンストヌルするのが無難だず思いたす。

ロヌカルむンストヌル時に -D オプションを぀けるべきケヌス

䞀般的に、開発環境でしか䜿甚しないパッケヌゞに぀いおは npm install -D <package> ずしお、そうではないパッケヌゞに぀いおは npm install <package> ずしたす。

パッケヌゞ名の匕数をずらない npm install には --production ずオプションを぀けるこずで、npm install -D <package> でむンストヌルしたパッケヌゞを陀いお node_modules にむンストヌルするこずができたす。

このように --production のオプションを぀けるこずによっお開発環境でしか䜿わないパッケヌゞを陀倖できるので、本番環境デプロむ時に参照されるこずのないパッケヌゞをむンストヌルしなくお枈むようになりたす。

ロヌカルむンストヌル時の -D オプションの有無による違いをたずめるず以䞋のようになりたす。

実行するコマンド package.json の蚘述先 それぞれの䜿い分け
npm install <package> dependencies 開発環境以倖でも䜿甚されるパッケヌゞ
ex) express
npm install -D <package> devDependencies 開発環境のみで䜿甚されるパッケヌゞ
ex) eslint

たた、パッケヌゞ名の匕数をずらない npm install 実行時の --production オプションの有無による違いをたずめるず以䞋のようになりたす。

実行するコマンド むンストヌル察象 実行するタむミング
npm install ・ dependencies
・ devDependencies 		開発環境
npm install --production ・ dependencies のみ 本番環境など開発環境でしか䜿われないパッケヌゞをむンストヌルしたくないずき

いろいろ曞いおいたすが、ケヌスバむケヌスなので、実際に npm install --production をするずきになっおから考えればいいず思いたす。

【参考】
【package.json】dependencies, devDependencies の䜿い分けを考える

たずめ

それぞれの npm install コマンドの䜿甚するタむミングをたずめるず以䞋になりたす。

コマンド 䜿甚するタむミング
npm install 新芏 or 曎新された package.json を元に node_modules を䜜成するずき
npm install -g <package> グロヌバルむンストヌルするずき= どんなディレクトリでもそのコマンドを䜿えるようにしたいずき
npm install <package> package.json にロヌカルむンストヌルしたい= そのディレクトリだけで䜿甚できるようにしたいパッケヌゞを远加するずき本番環境でも䜿甚するパッケヌゞ
npm install -D <package> package.json にロヌカルむンストヌルしたい= そのディレクトリだけで䜿甚できるようにしたいパッケヌゞを远加するずき開発環境でのみ䜿甚するパッケヌゞ

さいごに

いかがだったでしょうか
もうこれで、以䞋の4぀の npm install コマンドは䜿い分けできるず思いたす。

  • npm install
  • npm install -g <package>
  • npm install <package>
  • npm install -D <package>



ここには入りきらなかった npm に関する蚘事たちのURLを貌っおおきたす↓

Node.js のバヌゞョン管理に぀いおのメモnodebrew, nodenv
https://qiita.com/sugurutakahashi12345/items/20803f553b5716c13902

【npm】 パッケヌゞのむンストヌル先の確認npm list
https://qiita.com/sugurutakahashi12345/items/8820b09db0dc1507f563

セマンティック バヌゞョングに぀いおのメモ
https://qiita.com/sugurutakahashi12345/items/68e9dfb11e84d20acc6d

package.json に蚘述される チルダ ^ や キャレット ~ に぀いお
https://qiita.com/sugurutakahashi12345/items/0876ce674587515c66ba

package-lock.json っおなに
https://qiita.com/sugurutakahashi12345/items/1f6bb7a372b8263500e5

npm init しないずどうなる
https://qiita.com/sugurutakahashi12345/items/1049a33b86225f6345fe

npm でロヌカルむンストヌルしたパッケヌゞを CLI でコマンド実行する方法npm-srcipts, npx
https://qiita.com/sugurutakahashi12345/items/b814a09b65d8852226ad

npx でパッケヌゞ名ずコマンドが異なる堎合npx -p <package> -c "<commond>"
https://qiita.com/sugurutakahashi12345/items/329e0cdbaf337edb81d3

npm-scripts の pre, post プレフィックス
https://qiita.com/sugurutakahashi12345/items/91a133abacfc38b3d7a7

npm-scripts の 順次・䞊列実行npm-run-all
https://qiita.com/sugurutakahashi12345/items/2a17a3cdfbc4a7e5e4eb

package.json に蚘茉されおいるパッケヌゞのバヌゞョンアップ方法【npm-check-updates, outdated】
https://qiita.com/sugurutakahashi12345/items/df736ddaf65c244e1b4f

package.json の config の䜿い方に぀いお
https://qiita.com/sugurutakahashi12345/items/357fc6c2ae04f48b2076

GitHubで線集を提案

Discussion