1、 package.json

package.json 是项目核心的配置文件。用于定义项目的元数据、依赖、脚本命令等。它是 Node.js 和 npm/yarn/pnpm 等包管理工具的基础文件,也是 Vite 项目的重要组成部分。

我们刚创建的项目中,package.json 的内容如下

package.json
                                        
1
{
2
"name " : "keeplearn " ,
3
"private " : true ,
4
"version " : "0.0.0 " ,
5
"type " : "module " ,
6
"scripts " : {
7
"dev " : "vite " ,
8
"build " : "tsc -b &&vite build " ,
9
"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.x1.2.* :匹配 1.2.0、1.2.1,但不匹配 1.3.0
  • 1.x1.* :匹配 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
})
专栏首页
到顶
专栏目录