带你重新了解package.json

前言

在前端项目中，无论是 vue 还是 react ，在目录中都可以发现 package.json 这么一个文件，从文件后缀名可以得知这个文件是一个 JSON 对象，Json 是用来存储和交换文本信息，类似于 javascript 对象结构。而 package.json 里数据结构形式为 {kay：value} ，每一个键值对就是该当前项目的一项设置，这些配置和我们项目开发有着紧密的联系。

简介

当我们利用脚手架快速搭建一个简易的项目时，它会帮我们在根目录初始化好一个 package.jaon 配置文件。

然后它会提醒执行 cd 项目文件夹名 → npm install

当中的 npm install ，当执行该命令时，会在目录下创建了一个 node_modules 文件夹，该文件夹里面就是根据 package.json 文件中的配置信息来自动下载项目所需的模块。

{
  "name": "demo-vue3-ts",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@kjgl77/datav-vue3": "^1.7.1",
    "axios": "^1.4.0",
    "echarts": "^5.4.2",
    "pinia": "^2.0.36",
    "pinia-plugin-persist": "^1.0.0",
    "vue": "^3.3.2",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@tsconfig/node18": "^2.0.1",
    "@types/jsdom": "^21.1.1",
    "@types/node": "^18.16.8",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/test-utils": "^2.3.2",
    "@vue/tsconfig": "^0.4.0",
    "babel-plugin-enhance-log": "^0.2.1",
    "element-plus": "^2.3.5",
    "jsdom": "^22.0.0",
    "npm-run-all": "^4.1.5",
    "sass": "^1.62.1",
    "typescript": "~5.0.4",
    "unplugin-auto-import": "^0.16.4",
    "unplugin-vue-components": "^0.25.0",
    "vite": "^4.3.5",
    "vitest": "^0.31.0",
    "vue-tsc": "^1.6.4"
  }
}

在 package.json 中有着两个重要的字段，不可以没有的，否则无法执行 npm install ，这两个字段就是 name 和 version，认定为该项目唯一的标识符。

描述信息

name

name 字段表示项目的名称。它的值有以下几点限制：

名称的长度必须小于或等于 214 个字符
名称不能以 . 和 _ 开头，也不能包含大写字母
名称不能包含任何非 URL 安全的字符，因为名称最终会成为 URL 的一部分、命令行的参数以及文件夹的名称

version

version 字段表示项目打包时的版本号。它有着一些规范：

版本号格式通常为 主版本号. 次版本号. 修订号，例如 14.2.6
当项目中有着一些小改动或者大更新，该版本号也应该随之改变，通常更新一次，就加1，便于区分和找到对应的版本

description

description 字段用来描述这个项目包，可以让其他开发者在 npm 的搜索中发现我们的项目包。

author

author 字段用来表示该项目的作者，通常包含着作者的名字、邮箱、主页网址等信息

license

license 字段表示该包需要遵守的协议。

repository

repository 该字段用来指定代码存放的位置，有着项目仓库的地址、type等信息

依赖配置

dependencies

dependencies 该字段是一个大对象，里面包含着该项目在生产环境中需要的依赖包。当我们使用 npm 或者 yarn 安装像 element-plus、pinia、echarts等等时，这些包名就会自动插入该配置项中。其 key名为依赖名，值为当前依赖包的版本。表示其中所有的依赖都是在生产中必要不可缺的，缺少的话会让项目中出现异常。

devDependencies

devDependencies 该字段里包含的是项目在开发环境中需要的依赖包。该字段不同于上面的 dependencies，只在开发中生效，不会在生产环境中运行，如 Weboack、Vite、Sass、Eslint、Babel等等，都是用来辅助开发的。

我们在安装依赖包时，可以添加对应的标识来区分是安装在 dependencies 还是 devDependencies

npm install XXX -s ，npm install XXX -s 相当于 npm install -S 相当于 npm install --save，表示是 局部安装 的，会写进 package.json 文件中的 dependencie 里，只在 生产环境 中生效
npm install XXX -d，npm install XXX -d 相当于 npm install -D 相当于 npm install --save-dev，表示 局部安装 的，会写进 package.json 文件中的 devDependencies 里，只在 开发环境 中生效
npm install XXX -g，表示是 全局安装 的，安装一次后，就可以在其它项目中使用
npm install XXX，这里什么都不加，相当于 -s，也会写进 dependencie，可以在 生产环境中使用

脚本配置

scripts

scripts 字段为内置脚本执行入口，其中为 key：value 键值对，key 为npm 可运行的命令，用来代表 value 的命名行，其中包含着运行、发布等经常使用的指令

"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
  },

config

config 该字段用来配置 scripts 运行时的配置参数

"config": { "port": 3000 },

发布配置

private

private 该字段用来防止私有存储库意外发布，设置为 true 时，npm 就会拒绝发布它

总结

packge.json 是前端工程中重要的记录文档，里面有着项目所需要的软件包集合，每个前端项目中都有 package.json 文件，在Web工程中，最常见的配置有配置项目启动、打包命令和声明依赖的npm包，有了它就可以把项目中一切需要操作包括版本、依赖、打包等记录起来。