はじめに
今回の記事の目的
ReactアプリやNode.jsのExpressでアプリを作ると自動で作成されるpackage.jsonファイルと、package-lock.jsonファイルの意味をメモ。
package.jsonの役割
ざっくり理解では以下。
- npm（パッケージ管理ツール）で利用されるファイル。
- このプロジェクトで、インストールするしておくべきパッケージ（と、そのバージョン）を定義したもの。
npm installというコマンドを打つだけで、package.jsonで定義した通りにパッケージをインストールしてくれる。
何が良いのか？
package.jsonさえ同じものを使えば、誰でも同じ開発環境が構築できること。
- パッケージの実物（
node_modulesフォルダ配下）は容量が大きすぎて共有できない - パッケージ同士の依存関係も解決してくれる。
依存関係とは、「あるプログラムのビルドや実行のために、別のプログラムが必要であること」。ここでは、あるモジュールを使うためにほかのモジュールが必要であることや、特定のバージョンを利用する必要があることなどを表す。
nvmとnpmの違い
nvmは、Node.jsのバージョンを管理するツール。npmは、Node.jsのパッケージ（モジュール）とそのバージョンを管理するツール。
package.jsonのある場所
プロジェクトフォルダの直下に作成する。
npm initでNode.jsプロジェクトを開始すると自動で生成される。
package.jsonの中身
あくまで一例だが、イメージは以下。
{
"name": "jakee-ts",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"axios": "^0.21.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}全ては把握していないが、大事なのは
"dependencies": {
・・・
}の部分。
$ npm install [パッケージ名]でパッケージをインストールすると、package.jsonの"dependencies"の中にパッケージの情報が追記される。
package-lock.jsonとは
パッケージのバージョンを完全にロックするためのもの。
package.jsonだけでは、インストールするタイミングによってパッケージのバージョンが変わってしまうことがある。バージョンを「ロック」するのがpackage-lock.json。
チームメンバーの開発環境に自分と同じパッケージをインストールしてほしい場合、package.jsonだけでは完全に再現はできない。
先ほどの例にあった
"axios": "^0.21.4",を見るとわかる。
この例では、「axiosパッケージをバージョン0.x.xでインストールすること」までしか規定していない。
npmでは、バージョン指定に^をつけると、メジャーバージョンまでを規定する。
package-lock.jsonを使えば、チームメンバーの環境でnpm installを実行することでバージョンを含めて完全再現することができる。
package-lock.jsonの中身
一例ではあるが中身は以下。
{
"name": "react",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/code-frame": {
"version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
"integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
"requires": {
"@babel/highlight": "^7.14.5"
}
},
・・・（省略）
}【参考】yarn.lockとは
nvmの上位互換であるパッケージマネージャ「yarn」を使う場合は、package-lock.jsonの代わりに yarn.lock ファイルを利用する。
書き方は少し変わる。
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
"@babel/code-frame@7.10.4":
version "7.10.4"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
dependencies:
"@babel/highlight" "^7.10.4"おわりに
Node.jsやReactでパッケージをインストールする際に不可欠な、package.jsonとpackage-lock.jsonのざっくり概要を理解できた。
