package.json最全详解
今天来看看前端的⼤管家 package.json ⽂件相关的配置，充分了解这些配置有助于我们提⾼开发的效率，规范我们的项⽬。⽂章内容较多，建议先收藏在学习！
在每个前端项⽬中，都有 package.json ⽂件，它是项⽬的配置⽂件，常见的配置有配置项⽬启动、打包命令，声明依赖包等。package.json ⽂件是⼀个 JSON 对象，该对象的每⼀个成员就是当前项⽬的⼀项设置。package.json 作为前端的⼤管家，到底有哪些配置和我们的⽇常开发密切相关？下⾯就来仔细剖析⼀下这个⽂件。
当我们搭建⼀个新项⽬时，往往脚⼿架就帮我们初始化好了⼀个 package.jaon 配置⽂件，它位于项⽬的根⽬录中。当使⽤ react 脚⼿架（create-react-app）初始化⼀个项⽬时，其 package.json ⽂件内容如下：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
复制代码
当我们克隆⼀个新的项⽬到本地时，需要执⾏ npm install（yarn install）命令来安装项⽬所需的依赖⽂件。当执⾏该命令时，就会根据package.json ⽂件中的配置信息来⾃动下载所需的模块，也就是配置项⽬所需的运⾏和开发环境。
package.json 常见配置项如下：
⼀、必须属性
package.json 中最重要的两个字段就是 name 和 version，它们都是必须的，如果没有，就⽆法正常执⾏ npm install 命令。npm 规定package.json ⽂件是由名称和版本号作为唯⼀标识符的。
1. name
name 很容易理解，就是项⽬的名称，它是⼀个字符串。在给 name 字段命名时，需要注意以下⼏点：
名称的长度必须⼩于或等于 214 个字符，不能以 “.” 和“_”开头，不能包含⼤写字母（这是因为当软件包在 npm 上发布时，会基于此属性获得⾃⼰的 URL，所以不能包含⾮ URL 安全字符（non-url-safe））；
名称可以作为参数被传⼊ require("")，⽤来导⼊模块，所以应当尽可能的简短、语义化；
名称不能和其他模块的名称重复，可以使⽤ npm view 命令查询模块名是否重复，如果不重复就会提⽰ 404：
如果 npm 包上有对应的包，则会显⽰包的详细信息：
实际上，我们平时开发的很多项⽬并不会发布在 npm 上，所以这个名称是否标准可能就不是那么重要，
它不会影响项⽬的正常运⾏。如果需要发布在 npm 上，name 字段⼀定要符合要求。
2. version
version 字段表⽰该项⽬包的版本号，它是⼀个字符串。在每次项⽬改动后，即将发布时，都要同步的去更改项⽬的版本号。版本号的使⽤规范如下：
版本号的命名遵循语义化版本 2.0.0 规范，格式为：「主版本号. 次版本号. 修订号」，通常情况下，修改主版本号是做了⼤的功能性的改动，修改次版本号是新增了新功能，修改修订号就是修复了⼀些 bug；
如果某个版本的改动较⼤，并且不稳定，可能如法满⾜预期的兼容性需求，就需要发布先⾏版本，先⾏版本通过会加在版本号的后⾯，通过 “-” 号连接以点分隔的标识符和版本编译信息：内部版本（alpha）、公测版本（beta）和候选版本（rc，即 release
candiate）。
可以通过以下命令来查看 npm 包的版本信息，以 react 为例：
// 查看最新版本
npm view react version
// 查看所有版本
npm view react versions
复制代码
当执⾏第⼆条命令时，结果如下：
⼆、描述信息
package.jaon 中有五个和项⽬包描述信息相关的配置字段，下⾯就分别来看看这些字段的含义。
1. description
description 字段⽤来描述这个项⽬包，它是⼀个字符串，可以让其他开发者在 npm 的搜索中发现我们的项⽬包。
2. keywords
keywords 字段是⼀个字符串数组，表⽰这个项⽬包的关键词。和 description ⼀样，都是⽤来增加项⽬包的曝光率的。下⾯是 eslint 包的描述和关键词：
3. author
author 顾名思义就是作者，表⽰该项⽬包的作者。它有两种形式，⼀种是字符串格式：
"author": "CUGGZ <xxxxx@xx> (juejin/user/3544481220801815)"
复制代码
另⼀种是对象形式：
"author": {
"name" : "CUGGZ",
"email" : "xxxxx@xx",
"url" : "juejin/user/3544481220801815"
}
复制代码js获取json的key和value
4. contributors
contributors 表⽰该项⽬包的贡献者，和 author 不同的是，该字段是⼀个数组，包含所有的贡献者，它同样有两种写法：
"contributors": [
"CUGGZ0 <xxxxx@xx> (juejin/user/3544481220801815)",
"CUGGZ1 <xxxxx@xx> (juejin/user/3544481220801815)"
]
复制代码
"contributors": [
{
"name" : "CUGGZ0",
"email" : "xxxxx@xx",
"url" : "juejin/user/3544481220801815"
},
{
"name" : "CUGGZ1",
"email" : "xxxxx@xx",
"url" : "juejin/user/3544481220801815"
}
]
复制代码
5. homepage
homepage 就是项⽬的主页地址了，它是⼀个字符串。
6. repository
repository 表⽰代码的存放仓库地址，通常有两种书写形式。第⼀种是字符串形式：
"repository": "github/facebook/react.git"
复制代码
除此之外，还可以显式地设置版本控制系统，这时就是对象的形式：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。