【React】Vite 构建 React

项目搭建

vite 官网:Vite

跟着文档走即可,选择 react ,然后 ts + swc。

着重说一下 package-lock.json 这个文件有两个作用:

  • 锁版本号(保证项目在不同人手里安装的依赖都是相同的,解决版本冲突的问题)
  • 缓存(依赖的名字 + version + resolved ==> 生成一个 hash 值,然后这个 hash 值会与 integrity 的 hash 比较,相同的话直接使用目录中的 node_modules 包,不需要额外的下载 )

还有就是 package.json 中的 private 设置为 true,可以保证我们不会错误的将自己的项目发布到 npm 官网上。

src/vite-env.d.ts 中的三斜线指令用于引入类型声明,比如各种预处理器,各种文件后缀的类型等。

tsx 复制代码
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

这里使用的 ! 是非空断言,用于"欺骗"编译器我们的变量不为空,减少不必要的 ts 类型校验。

public目录的资源编译之后会存放到根目录,而静态资源assets是会随着项目一起打包的,public则不会被编译。

当我们 dev 编译项目后,public 中的文件会被放到项目的根目录下,这就是为什么我们可以直接在项目中路径中访问,也可以直接进行 ajax 发送请求获取。所以,public 下的文件 不会被编译,而 assets 下的文件会被编译。

相关推荐
飞翔的佩奇几秒前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15881 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追1 小时前
Vue组件化开发
前端·html
艾德金的溪2 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长2 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH2 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴2 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30732 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园3 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7274 小时前
解除chrome中http无法录音问题,权限
前端·chrome