package.json 是项目核心的配置文件。用于定义项目的元数据、依赖、脚本命令等。它是 Node.js 和 npm/yarn/pnpm 等包管理工具的基础文件,也是 Vite 项目的重要组成部分。
我们刚创建的项目中,package.json
的内容如下
10
{
20
"name "
:
"keeplearn "
,
30
"private "
:
true
,
40
"version "
:
"0.0.0 "
,
50
"type "
:
"module "
,
60
"scripts "
: {
70
"dev "
:
"vite "
,
80
"build "
:
"tsc -b &&vite build "
,
90
"lint "
:
"eslint ."
,
10
"preview "
:
"vite preview "
11
},
12
"dependencies "
: {
13
"react "
:
"^19.0.0 "
,
14
"react-dom "
:
"^19.0.0 "
15
},
16
"devDependencies "
: {
17
"@eslint/js "
:
"^9.19.0 "
,
18
"@types/react "
:
"^19.0.8 "
,
19
"@types/react-dom "
:
"^19.0.3 "
,
20
"@vitejs/plugin-react-swc "
:
"^3.5.0 "
,
21
"eslint "
:
"^9.19.0 "
,
22
"eslint-plugin-react-hooks "
:
"^5.0.0 "
,
23
"eslint-plugin-react-refresh "
:
"^0.4.18 "
,
24
"globals "
:
"^15.14.0 "
,
25
"typescript "
:
"~5.7.2 "
,
26
"typescript-eslint "
:
"^8.22.0 "
,
27
"vite "
:
"^6.1.0 "
28
}
29
}
true
module
npm run xxx
或
yarn xxx
运行。例如,这里有一个命令为 dev
,那么我们就可以通过如下的方式运行该指令
npm
run dev
在项目开发中,这是需要特别注意的一个字段。经常会根据需求进行改动。
在 package.json 中,依赖包的版本号前面的符号(如 ^、~、>等)用于定义版本范围,指定项目可以接受的依赖包版本。这些符号遵循语义化版本规范(SemVer) ,帮助开发者在依赖更新时平衡稳定性和新特性。
当我们在重新安装依赖包时,依赖包的更新则遵循如下的规则,以避免项目由于自动更新了依赖而出现重大的问题。
^
(插入符号)
允许更新到与指定版本兼容的版本,不改变最左边的非零数字 。
^1.2.3
允许更新到 1.x.x
,但不允许更新到 2.0.0
^0.2.3
允许更新到 0.2.x
,但不允许更新到 0.3.0
^0.0.3
只允许更新到 0.0.3
(因为最左边的非零数字是第三位)
~
(波浪符号)
允许更新到与指定版本最接近的版本,此时只改变最后一位数字
>
、>=
、<
、<=
(比较符号)
指定一个版本范围
>1.2.3
:大于 1.2.3
>=1.2.3
:大于或等于 1.2.3
<1.2.3
:小于 1.2.3
<=1.2.3
:小于或等于 1.2.3
-
(连字符)
指定一个版本范围
1.2.3 - 2.3.4
:匹配 1.2.3 到 2.3.4 之间的所有版本
x、X、*
(通配符)
匹配任意版本号的部分
1.2.x
或 1.2.*
:匹配 1.2.0、1.2.1,但不匹配 1.3.0
1.x
或 1.*
:匹配 1.0.0、1.1.0、1.2.0,但不匹配 2.0.0
*
:匹配任意版本
无符号(精确版本)
指定一个确切的版本号
1.2.3
:只匹配 1.2.3
任何一次版本更新都有可能对项目造成不可估量的损失,因此简单了解这些概念,对于维护项目的稳定性有巨大的帮助。
该文件是 vite
的配置文件。在实战项目中尤为重要。但是这里我们并不需要专门花过多的精力去了解它。我们在项目开发的过程中,如果遇到了特定的需求,会单独分享如何在 vite.config.ts
中进行配置,大家只需要照着做就行了。
默认状态下该文件内容非常简单,仅仅只有一个 react
的编译插件。
1
import
{ defineConfig }
from
'vite '
2
import
react
from
'@vitejs/plugin-react-swc '
3
4
// https://vite.dev/config/
5
export default
defineConfig
({
6
plugins: [
react
()]
,
7
})