1、 package.json

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
}

• name: 项目的名称。如果你要将该项目发布到 npm 上，那么该名称必须是唯一值。
• private: 如果项目是私有的，不会发布到 npm 上，那么可以把该值设置为 true
• version: 项目的版本号，遵循语义化版本规范（SemVer）
• type: 定义模块类型，默认为 commonjs。如果使用 ES Modules，可以设置为 module
• scripts: 定义项目的脚本命令，可以通过 npm run xxx 或 yarn xxx 运行。例如，这里有一个命令为 dev，那么我们就可以通过如下的方式运行该指令

npm run dev

在项目开发中，这是需要特别注意的一个字段。经常会根据需求进行改动。

• dependencies: 项目的生产环境依赖包，即项目运行时需要的包
• devDependencies: 项目的开发环境依赖包，即仅在开发过程中需要的包

2、 依赖包的版本号管理

在 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.x，但不允许更新到 1.3.0
• ~1.2 允许更新到 1.2.x，但不允许更新到 1.3.0
• ~1 允许更新到 1.x.x，但不允许更新到 2.0.0

>、>=、<、<=（比较符号）

指定一个版本范围

• >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

任何一次版本更新都有可能对项目造成不可估量的损失，因此简单了解这些概念，对于维护项目的稳定性有巨大的帮助。

3、 vite.config.ts

该文件是 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
})