【React】Vite 构建 React

谢尔登2024-09-07 21:10

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 下的文件会被编译。