package.jsonについて

2021.07.292024.06.11

悩んでいる人

packeage.jsonってよく聞くけど何？

本記事では、そのような悩みを解決致します。

僕も、package.jsonとかpackeage.json.lockとかnode_moduelsとか意味分からなすぎて嫌になった記憶があります。なんとなくコード書いているけど腑に落ちないってときはこのあたりの理解が足りていない気がします。

なので、package.jsonを理解できるように解説していきます。

package.jsonについて知ろう

パッケージマネージャー（npm/yarn）

npmとはnode package managerの略で、Node.js関連のパッケージをインストールするためにツールになります。

npmはパッケージの依存関係を管理して、必要なほかのパッケージをまとめてインストールしてくれます。

package.jsonの中身を見る

npmでインストールしたパッケージのバージョン管理を行うために使われているpackage.json。

{
  "name": "react-raisetech-no4",
  "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",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "eslint": "eslint src __test__",
    "eslint:fix": "eslint --fix src __test__"
  },
  "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"
    ]
  },
  "devDependencies": {
    "eslint": "^7.30.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2"
  }
}

name

パッケージ名。NPMに公開するときには、

version

バージョン情報

private

このプロパティがtrueになっていると、モジュールの公開ができません。
react-create-appをしたときには、デフォルトでtrueになってました。

scripts

コマンドエイリアスを登録できます。

npm run startのようにnpm runを頭につけて登録したコマンドを実行できる。
※start / stop / restart / test の4つについてはrunを省略できます。

npm run start //OK
npm start //OK
npm run eslint //OK
npm eslint //NG

dependencies

使用する外部パッケージの一覧。ここを参考にして、node_modules配下を展開してくれます。
本番環境で使用するパッケージを記載します。

devDependencies

使用する外部パッケージの一覧。ここを参考にして、node_modules配下を展開してくれます。
開発環境で使用するパッケージを記載します。

オカ

とりあえず重要そうなものは上記になります。
調べていたらめちゃくちゃ丁寧にまとまっている記事があったんで興味がある人はこちらも見てみてくださいー。

https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847

バージョンの指定方法

これはこうやって指定しているんだなぁぐらいの理解で問題ないはず。
わからなくなったら、調べればすぐでてくるし。

下記で簡単に説明しておきます。

"react": "^17.0.2",

バージョンは"^17.0.2"で指定されております。major.minor.patchという構成でできています。
大きな変更があったときは、17の部分が18に変わります。
マイナー変更があったときは、17.1.2のように変わります。
バグ修正などのときには、17.0.3のように変わります。

下記バージョン指定方法のルールになります。

・^17.0.2 ▶ majorは変えない範囲で更新される(17.0.2~17.9.9)
・17.0.2 ▶完全一のバージョンのみ
・~17.0.2 ▶ minorは変えない範囲で更新される(17.0.2~17.0.9)
・17.0.*、17.0.x、17.0.X ▶ *の部分が自由に更新される
・17.0.2 – 17.1.0 ▶指定した範囲の中で更新される
・>=17.0.2 ▶演算子に応じて更新される(>、>=、<、<=)