package.json基础配置解析

本文正在参加「金石计划」

在前端学习过程中相信伙伴们无论是使用vue或者是react开发的项目中，package.json配置文件相信大家都是熟悉的，但是你真的了解其中每一项配置的具体含义吗？我在看一些大佬的文章以及对照着项目生成的package.json来分享一下这篇笔记。

使用Vite脚手架创建的Vue-ts项目的package.json文件

{
  "name": "vue-package-json",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vue-tsc": "^1.2.0"
  }
}

1. name字段

作为package.json中必须属性之一，其表示项目的名称，给项目命名时应该遵循以下几点：

名称的长度必须小于或等于214个字符，不能以"."或者"_"开头，不能包含大写字母；当软件包在npm库中发布时，会基于name属性值来获取对应包的URL，所以不能包含非URL安全字符（non-url-safe）；
名称可以作为参数被传入require("")，用来导入模块，所以应当尽可能模块化、语义化；
名称不能和其他模块的名称重复，可以使用npm view命令查询模块明是否重复，如果不重复就会提示404;

2. private字段

与其语义化一样，它的含义是是否是私人的，当其的值设置为true时，表示这是一个私人项目，所以当我们使用npm publish命令去发布一个私有化的包时，不能发布，只有将其值设置为false才能发布到npm库中；

3. version字段

作为package.json中另一个必须属性，其表示当前包的版本号；版本号的使用应当遵循以下规则：

版本号的命名遵循语义化版本2.0.0规范，格式为：主版本号.次版本号.修订号；通常情况下修改主版本号是做了大的功能性改动，修改次版本号是新增了功能，修改了修订号是修复一些已知的bug；
如果某个版本改动较大并且不稳定，可能无法满足预期的兼容性需求，就需要发布先行版本，先行版本通过会加在版本号的后面，通过“-”号连接以点分隔的标识符和版本编译信息：内部版本（alpha）、公测版本（beta）和候选版本（rc，即release candiate）。

vue的所有版本预览

pnpm view vue versions;  // 也可以在终端使用 npm view vue versions同样的效果

部分节选：
package.json基础配置解析

4. type字段

当type中的值为module时，则以.js结尾或者没有任何拓展名的文件将作为ES模块进行加载，值为'commonjs'则被当作commonJs模块处理；
若没有定义type字段则视为按照CommonJs规范处理；
node官方建议包的开发者明确指定package.json中type的属性值;
无论package.json中的type字段为何值，.mjs的文件都按照ES模块来处理，.cjs的文件都按照commonJs模块来处理。

5. scripts(脚本配置)

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },

scripts是package.json中内置的脚本入口，是以key-value键值对方式配置，key是可运行的命令，value为具体指定的内容；可以通过npm run XXX || yarn run XXX || pnpm run XXX来运行这些指令；例如pnpm run dev；使用好该字段可以大大加快我们开发的效率。

6. dependencies字段

该字段是声明项目的生产环境中所必须的依赖包；当我们使用npm、yarn、pnpm等包管理器时，会自动将依赖包插入到该配置项中；

"dependencies": {
    "vue": "^3.2.47"
  },

该字段的值为一个对象，对象中的每一项，分别由模块名和对应的版本要求组成，表示依赖的模块以及其范围版本；

在依赖包版本号最前面有两种符号分别是~和^，其分别代表

~的意思是匹配最近的小版本比如~1.0.2将会匹配所有的1.0.x版本，但不匹配1.1.0;
^的意思是最近的一个大版本比如1.0.2 将会匹配所有 1.x.x, 但不包括2.x.x;

7. devDependencies字段

devDependencies中声明的是开发阶段需要的依赖包，如Webpack、Eslint、Babel等，用于辅助开发。它们不同于 dependencies，因为它们只需安装在开发设备上，而无需在生产环境中运行代码。当打包上线时并不需要这些包，所以可以把这些依赖添加到 devDependencies 中，这些依赖依然会在本地指定 npm install 时被安装和管理，但是不会被安装到生产环境中。

以上就是我们使用Vite脚手架创建一个Vue项目中package.json包含的一些基础配置的具体含义，希望能给你带来一些帮助。

本文参考：关于前端大管家 package.json，你知道多少？ (CUGGZ)

原文链接：https://juejin.cn/post/7217731723510202429 作者：寒月十九