エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

package.jsonとpackage-lock.json とは?(Node.js/React)

はじめに

今回の記事の目的

ReactアプリやNode.jsのExpressでアプリを作ると自動で作成されるpackage.jsonファイルの意味をメモ。

package.jsonの役割

ざっくり理解では以下。

  • npm(パッケージ管理ツール)で利用されるファイル。
  • このプロジェクトで、インストールするしておくべきパッケージ(と、そのバージョン)を定義したもの。

npm installというコマンドを打つだけで、package.jsonで定義した通りにパッケージをインストールしてくれる。

何が良いのか

package.jsonさえ同じものを使えば、誰でも同じ開発環境が構築できること。

  • パッケージの実物(node_modulesフォルダ配下)は容量が大きすぎて共有できない
  • パッケージ同士の依存関係(?)なども解決してくれるらしい

【補足】nvmとnpmの違い

  • nvmは、Node.jsのバージョンを管理するツール。
  • npmは、Node.jsのパッケージ(モジュール)とそのバージョンを管理するツール。

参考資料:
nvm, Node.js, package.json, npm, yarn, webpackの違いについて - Qiita

package.jsonのある場所

プロジェクトフォルダの直下に作成する。

プロジェクトフォルダの中身
プロジェクトフォルダの中身

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

参考資料:
https://zenn.dev/luvmini511/articles/56bf98f0d398a5

package.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を使うならpackage-lock.json。 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のざっくり概要を理解できた。