本文主要是介绍【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 中的三斜线指令用于引入类型声明,比如各种预处理器,各种文件后缀的类型等。
createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>,
)
这里使用的 !
是非空断言,用于“欺骗”编译器我们的变量不为空,减少不必要的 ts 类型校验。
public目录的资源编译之后会存放到根目录,而静态资源assets是会随着项目一起打包的,public则不会被编译。
当我们 dev 编译项目后,public 中的文件会被放到项目的根目录下,这就是为什么我们可以直接在项目中路径中访问,也可以直接进行 ajax 发送请求获取。所以,public 下的文件 不会被编译,而 assets 下的文件会被编译。
这篇关于【React】Vite 构建 React的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!