JavaScriptのパッケージ管理 npm・Yarn・package.json

JavaScript

初めに

今回は普段なんとなく使用していた、JavaScriptのパッケージ管理を担っているnpm、Yarn、package.jsonについて、整理したいと思う。

前提

npmレジストリ

npmレジストリは、サーバーサイド側(Node.js)とブラウザ側の両方で使用できる、JavaScriptのパッケージレジストリのこと。Rubyでいう、rubygems.orgと似ている。webpackも、このnpmレジストリにあるパッケージの一つである。


※一般的にはnpmと称されるが、CLI上で使用されるnpmと分けるため、本記事ではnpmレジストリとする。



本題

package.json

アプリケーションの依存関係にある、npmレジストリのパッケージに関する情報を記録するためのファイル。RailsのGemfileと似ている。
rails newをすると、以下のようなディレクトリの構成になる。
(Rails バージョン6.0.5)

{
  "name": "hoge",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^4.9.0"
  }
}

dependencies

使用するnpmレジストリのパッケージを記述していく。
パッケージ名と、バージョン(範囲)を指定し、定義する。gitのURLで定義することもできる。

devDependencies
　 本番環境で使用しないパッケージは、こちらで定義する。


またscriptを用いて、スクリプトを定義することができる。

Ex.

...
  "devDependencies": {
    "webpack-dev-server": "^4.9.0"
  },
"scripts": {
    "grint": "echo Hello!"
  }

% yarn run grint
#=>
yarn run v1.22.11
$ echo Hello!
Hello!
✨  Done in 0.05s.


npm

npm Inc社が2010年に開発したJavaScriptのパッケージマネージャーの一つである。

  • Node.jsをインストールをすると、自動でインストールされるようになっている
  • package.jsonに書かれているnpmレジストリのパッケージを、依存関係を解決してインストールしてくれる。
  • インストールされたパッケージのバージョンはpackage-lock.jsonに記載される
  • インストールしたパッケージは、node_modulesディレクトリに格納される。


Yarn

Facebookが2016年に開発した、npmに並ぶJavaScriptパッケージマネージャの一つ。

  • npmレジストリにあるパッケージの一つのため、npm経由でインストールする
  • npmと互換性があるため、npmと同様にpackage.jsonの記述を参照し、インストールする
  • インストールされたパッケージのバージョンはyarn.lockに記載される
  • インストールしたパッケージは、npmと同様にnode_modulesディレクトリに格納される。


npmとYarnの違い

当初npmではパッケージの依存関係の管理がなく、セキュリティ上でも問題があったためにYarnが開発されたとのことだが、現在はnpmがYarnの機能を取り入れている(先に挙げたpackage-lock.json等)ため、現在は、ほぼ差はないとのこと。



参考