RubyでいうところのGemfileに相当するものだが、他にも役割がある。npmコマンドとyarnコマンドのどちらもpackage.jsonを参照するようである。

ファイル作成

npmならnpm init -y、yarnならyarn init -yで作成できる。-yオプションを付けなければライセンスなどの選択ができる。npmとyarnで生成されるファイルに差異はあるが基本的に同じものである。

ロックファイル

RubyでいうところのGemfile.lockに相当するものとして、npmの場合はpackage-lock.json、yarnの場合はyarn.lockファイルができる。npmを使っているのかyarnを使っているのかはこれで判断できるはずである。

インストールしたパッケージが格納されるディレクトリ。Rubyでいうところのvendor/bundleにあたる。一応、-gオプションを付けてインストールするとグローバルにインストールされるらしいが、デフォルトではプロジェクトローカルのnode_modulesディレクトリに格納される。

RubyのGemfileと違って、package.jsonを編集するのではなく、コマンドによってpackage.jsonへのパッケージ追加と同時にインストールを行う。

npmの場合はnpm install --save-dev webpack webpack-cli、yarnの場合はyarn add webpack webpack-cli --devのように行う。

バージョンの指定をしたい場合はyarn add webpack@5.38.1 --devのようにパッケージ名の後に@バージョンを指定する。

webpackなどは開発環境でのみ利用し、ブラウザで動かす時には利用されないパッケージである。逆にjQueryやReactなどはブラウザで動かすときに利用されるパッケージである。

このように用途の違うパッケージの依存を区別するために、dependenciesとdevDependenciesに分けてパッケージを管理する。

{
  // 省略
  "devDependencies": {
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

開発用（devDependencies）のパッケージをインストールする場合は、npmならnpm install --save-dev webpack webpack-cli、yarnならyarn add webpack webpack-cli --devのように行う。

実行用（dependencies）のパッケージをインストールする場合は、npmならnpm install --save jquery、yarnならyarn add jqueryのように行う。

コマンドのショートカットを作成することもできる。

  "scripts": {
    "build": "webpack"
  },

package.jsonに上記を追加してnpm run buildまたはyarn run buildを実行すればwebpackが実行される。ファイルウォッチさせたい場合は、"build": "webpack --watch"とすればよい。

上記のscriptsが必須というわけではなく、追加せずともyarn exec webpackやyarn exec webpack --watchのようにコマンド実行はできる。