本記事について
package.jsonの機能について個人的に役に立ちそうなものを備忘録的にまとめてみたものになります。
過不足等あるかと思いますが随時メンテしていければと思っております。
package.jsonとは？
package.jsonとはNode.js上でインストールするパッケージの指定やメタデータの設定、スクリプト
の記述等を行うことができるjson形式のファイルです。
インストールされたパッケージと依存関係はpackage-lock.json(yarnの場合yarn.lock)として生成されます。
使用するバージョンの指定方法
ライブラリのバージョン管理にはSemantic Versioningという管理手法が用いられており、後方互換性や機能追加、バグ修正などの影響範囲ごとにmajor minor patchとし○○.xx.□□のようにピリオドで区切られた数字でバージョンを表記しています。
各パッケージのバージョン表記の前に ^(キャレット)もしくは~(チルダ)をつけることでバージョンの更新を自動的に取得し、指定されたバージョンの中から最新のものをインストールするよう許可することができます。
^(キャレット)をつけることでminorバージョンまでの更新を、~(チルダ)をつけることでpatchバージョンまでの更新を取得してインストールするようになります。
また、完全にバージョンを固定したい場合は記号を付けずにバージョンを指定することで実現可能です。
{
"devDependencies": {
"@types/node": "^18.16.19",
"eslint": "~8.45.0",
"nuxt": "3.6.3"
}
}
こちらの例の場合、^(キャレット)で指定している@types/nodeのバージョンは 18.16.x <= 18.x.x < 19.0.0となり、18.16以降19.0未満の範囲でのバージョン更新を許可する記述となります。
またeslintのバージョンは 8.45.0 <= 8.45.x < 8.46.0となり、8.45.0以降8.46.0未満の範囲でのバージョン更新を許可する記述となります。
dependenciesとdevDependenciesの使い分け
パッケージをインストールする際に主に使うのが dependenciesとdevDependenciesというオブジェクトになりますが、具体的にはどのように使い分けるのがよいでしょうか？
dependenciesに記述するものは 本番環境でのビルド時に必要なパッケージ
devDependenciesに記述するものは ローカル・テスト環境等でのビルド時に必要なパッケージ
とされています。
{
"dependencies": {
"vuetify": "^3.3.9"
},
"devDependencies": {
"@nuxt/devtools": "latest",
"@types/node": "^18.16.19",
"eslint": "^8.45.0",
"nuxt": "^3.6.3"
}
}
このように、テストツールやトランスパイルが必要なものについてはdevDependenciesに記述します。
重複しているパッケージのバージョンをまとめて指定したい
パッケージ同士の依存関係の問題で、同一パッケージの別バージョンが重複していたりすることは開発上よくあるケースだと思います。
それでも問題なく動作しているれば とりあえず問題はないのですが、パッケージのバージョン更新を行った際にかみ合わせが悪く何度試してもビルドが通らないくなることが稀によくあるかと思います。
重複したバージョンをインストールしたくない場合はresolutionオブジェクト内にパッケージとバージョンを指定することで、単一のバージョンをインストールすることができます。
{
"resolutions": {
"@nuxt/kit": "~3.4.3"
}
}
まとめ
自分なりにまとめてみましたが、なんとなくで使ってしまっていた部分が多くあったりそもそも知らない機能があったりとドキュメント化する中で知見が深まったように思います。
あれ？この書き方で良いんだっけ？と迷ったときに当記事を思いだして頂ければ幸いです。
マサカリや追記等、ぜひよろしくお願いします！
公式
npm
https://docs.npmjs.com/cli/v9/configuring-npm/package-json