こんにちは！！
今回ではWeb・フロントエンドでの開発では欠かせないnpm and yarnの使い方をなるべく分かりやすくやっていきたいと思います。
まず前提としてnpmって何者なのかご存知ですか？
本来はプログラミング言語のJavaScriptはWebブラウザ上で動く言語であり、フロント側となります。 JavaScriptでもサーバー側を書きたい！！ということからNode.jsが誕生しました。
Node.jsでサーバーサイドモジュールが使われるようになり、それを自動で依存関係を管理するパッケージ管理システムが登場します。 それがNode.jsのパッケージ管理システムの『Node Packge Manager』npmとなります。
npmは依存関係を管理してくれるだけではなく バージョンの管理も可能となっています。
npmはNode.jsのパッケージやツールなどをインストールしそれを自動で管理してくれる便利なソフトツールですJavaScriptでフレームワークなどを扱う際は必ず必要となります。
フロントエンジニアが絶対欠かせないワケがわかりますね！。
yarnのインストール
npm install yarn npm install -g yarn //グローバルでインストール
yarnはnpmを経由してインストールしなくてはなりません。
npm・yarnの使い方
npmはNode.jsをインストールすれば自動で一緒にインストールされます。
まずはnpmで管理をするディレクトリを作成します npmをインストールした後、初期化する処理です。 initを行うと、対話式で質問されながら進んでいきます 対話式をカットした場合はインストールする際にオプションを付けます。
npm init -y
yarn init -y
『-y』のオプションを付ける事によりデフォルト設定で構わない、全てYESという事になります。 ご自身で設定していく場合はオプションは付けずにそのまま使用して下さい。 全てenterキーを押して流しても問題はありません。
npm init
yarn init
initコマンドで『package.json』ファイルが自動で生成されます。 これはあなたがインストールしたパッケージに関する設定情報を記述するファイルとなります。
{
"name": "my-project", //名前
"version": "1.0.0", //バージョン
"dependencies": { //本番環境依存関係
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3"
},
"main": "index.js", //エントリポイント
"scripts": {//シェルスクリプトのエイリアス
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
"keywords": [], //パッケージを探す
"devDependencies": {//テスト・ビルド開発時の依存関係
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
}
}
package.jsonについてはまた記事にしたいと思うので今回は省きます、軽く一言で説明入れときました。
そしてnpmを使用しターミナルでコマンドを叩けばパッケージのインストールが可能となります。 インストールの時は2種類での選択肢があります 『ローカルインストール』or 『グローバルインストール』になります。
ローカルインストール
カレントディレクトリにあるnode_modulesを配下にインストールします、つまりあなたのプロジェクト事にバージョンを管理していく事になります。
npm install パッケージ名 npm install パッケージ名@ バージョン指定
yarn add パッケージ名 yarn add パッケージ名@ バージョン指定
このように使用したいパッケージをインストールします。 ご自身でインストールしたnpmやNode.jsをバージョンを確認する際は
npm —v v17.1.0
yarn —v v17.1.0
『npm --version』を省略したに過ぎません。 もちろんインストールも『npm i パッケージ名』でも可能です。
一括でインストール
パッケージをインストールする際、一括でまとめてインストールする事も可能です。
npm install パッケージ名 パッケージ名
yarn add パッケージ名 パッケージ名
パッケージをアップグレード
npm update パッケージ名 npm update パッケージ名@バージョン指定
yarn upgrade パッケージ名 yarn upgrade パッケージ名@ バージョン指定
省略の際は『npm up』とします。 特定のバージョンを指定してアップデートする場合 依存関係に注意しなければいけません！！。 依存関係は、パッケージを動かす為に必要なパッケージの関係性となります。
パッケージのアンインストール
必要の無くなったパッケージはアンインストールしてあなたのプロジェクトの依存関係から削除するようにしましょう。 パッケージを削除すると、dependencies, devDependencies などの依存関係から削除されます。
npm uninstall パッケージ名
yarn remove パッケージ名
未使用のパッケージを削除
package.jsonから削除した不要なパッケージをnode_modulesから削除します。
npm prune
yarn prune
パッケージの一覧
インストール済みのパッケージの一覧を表示して確認したい場合はこのコマンドを使用します。
npm list npm ls
yarn list yarn ls
グローバルインストール
ローカルの場合ではパッケージをインストールするとカレントディレクトリにnode_modulesというディレクトリが作成され、その中にパッケージがインストールされ管理されていきます。
グローバルでは『システムディレクトリ』のnode_modulesにインストールされます、全てのプロジェクトで使用が可能となり、プロジェクトを変えても何度もインストールする必要がなく自動的に実行されpathが通ります。
ですがインストールしたパッケージやバージョンが変わるとpatch問題が発生したりなど色々とデメリットもあります。
使い方は難しくありません
npm install —global パッケージ名
yarn add global パッケージ名
オプションのグローバルを指定します、もちろん省略は『npm i -g パッケージ名』で可能です。
npmとyarnの違い
yarnはnpmと互換性があり、 npmで使用していたプロジェクトの設定ファイル(package.json)をそのまま使用できます。
インストールが早く、セキュリティに関してもnpmよりは上で尚且つバージョン違いの依存パッケージをインストールする恐れがないです。 加えてyarn独自の機能を搭載しています。
ここ最近のnpmはコマンドを使用する際はシンプルで扱いやすい、どちらを使っていくかは個人によって違いますしプロジェクトによって使い分けてる方もいらっしゃいます。
ご自身がお好きな方でやっていくのが無難です！。
ちなみに私はどちらも使用していますが npmでの使用率が高いです！。
