2022年接近尾声的这个时刻点，不少从事React开发初涉此领域的新手，仍借助create-react-app承受着启动过程的漫长以及热更新的迟缓状况，然而Vite凭借其能够在极短时间内实现启动，并且具备高效热重载特性，已然成为构建React项目更为理想的选择。这篇教程并非讲些空洞不实的话语，而是直接引领你逐一经历真实开发情境里，自起始搭建Vite + React环境的一整套完整流程，全部都是小刘于2022年12月切实操作过后积累的经验。
用Vite从零到一创建React项目
Vite针对Node版本设置了硬性要求，该要求是必须要大于12.0.0。我于2022年12月24日进行搭建操作的时候，所使用的是Node 16.14.2 ，你能够打开终端，输入node -v来对版本加以确认。要是版本处于过低的情况，建议先借助nvm实施升级，不然后续步骤将会出现报错现象。
npm init @vitejs/app // 这个已经被弃用 npm init vite // 使用这个 or yarn create @vitejs/app // 同理，使用下面这个 yarn create vite
构建指令蛮简洁，吾惯以yarn操作，键入yarn create vite。随后吾填项目名为demo，框架挑了React，变体选的是TypeScript。整体进程未逾30秒，项目便存于文件夹之中了。最终借由yarn安装依赖，经yarn dev启动，浏览器弹出Vite+React默认页面，此步骤即告完成了。
重构目录结构适应实际开发
因脚手架所生成的目录极为简陋，src 之下仅仅存在 App 以及 main 这几个文件，实在根本无法给予真实项目以支撑。于是我依据企业级项目的惯例再度展开合理规划，也就是于 src 以内新建 pages 用以放置页面组件，新建 components 用来存放可复用 UI 组件，新建 utils 放置工具函数，新建 services 存放 API 请求相关代码，新建 types 放置全局类型定义。
这些示例样式文件，也就是App.css以及index.css，被同时删掉了，后续呢我们会采用Less来进行替代。index.html这个文件，原本在public目录下，现在被移动到了项目的根目录，如此一来路径引用就变得更加清晰了。我从2020年开始使用这样的目录结构，并且在多个中后台项目里都进行过验证，结果表明其可维护性相较于默认结构要高得多。
路由选型V5还是V6的纠结与解决
在2022年时，React Router V6已然成为主流，然而它废弃了Switch转而采用Routes，其组件写法的变动幅度极大。我所接手的老项目仍旧在使用V5，鉴于要维持技术栈的统一，此次环境搭建我依旧选择了V5。执行yarn add react-router-dom@5.3.0，将其降级至V5版本。
npm install react-router-dom -S // --save 加上 -S 或 --save 会让依赖更新到 package.json 文件中 or yarn add react-router-dom -S
在App.tsx之中，引入了BrowserRouter、Switch以及Route，针对/login与/dashboard这两个基础路由展开了配置。存在一个坑，那便是降级之后TypeScript有可能会报类型错误，我的解决办法是将node_modules以及yarn.lock删除掉，而后进行重新安装，如此问题便消失了。要是你同样使用V5，记得要严格依据这个版本号来。
别名配置打通模块引入路径
return (
{/* 中间层 */}
<Route exact path="/approve" component={Approve} /
)
构建期间放进组件得撰写../../../这般的相对路径，既不美观又极易出差错，我于vite.config.ts里头设置了别名，将@指向src目录，设置完发觉编辑器显示红色，给出找不到模块的提示，这是源于TypeScript不明白这个别名。
在tsconfig.json里头添加compilerOptions.paths，增添"@/": ["./src/"]；这两项配置是缺一不可的，好多新手仅仅配置了vite那边部分，却没有配置tsconfig，致使别名没有效果；在2022年12月18日之时我方帮同事查验这个问题，前前后后花费了20分钟才发觉是tsconfig配置遗漏了。
Ant Design引入与样式按需加载
有一个名为Ant Design的对象，它是React生态当中最为成熟的UI库，我借助yarn add antd这种方式安装了4.24.0版本，在App.tsx这个文件里通过import 'antd/dist/antd.css'这种操作引入了全量样式，之后直接运用Button组件进行测试，页面呈现出正常显示的状态。
关于按需加载，我并未进行额外配置，Vite与ES模块相结合，已然能够实现天然的按需效果，即用到多少组件，便引入多少组件。倘若你追求极致性能，那么可以安装vite - plugin - imp，然而对于小项目而言，并不必要。在2022年黑五期间，我所制作的促销活动页面，便是采用了这套配置，首屏加载时间在2秒以内，这完全能够满足需求。
npm install react-router-dom@5.2.1 -S
请求模块二次封装与跨域配置
Axios于2022年的12月23日发布了1.2.1这一版本，我在安装之后将其统一封装到services/http.ts这个文件里。拦截器配置了在请求头添加token的操作，响应的时候统一处理401跳转登录的情况。同时引入了nprogress当作顶部加载进度标志，请求开始的时候显示，请求结束的时候隐藏，用户体验显得很顺滑的样子。
跨域相关问题于开发环境借助Vite的proxy予以解决，在vite.config.ts内部配置proxy，把/api转至后端实际真实地址那儿，留意在此处无需于前面增添任何环境变量文件，直接书写于config当中就可以了，我在12月20日才刚刚给实习生进行过演示，在配置完毕之后前端发起请求全然感受不到跨域是存在着的。
npm i --save @types/react-router-dom
CSS预处理器的选择与落地
Less跟Sass二者选其一，我的喜好倾向于选择Less。运行yarn add less less-loader -D，安装完成后直接于vite.config.ts当中配置css.preprocessorOptions；实际测试之后可得到支持变量乃至于嵌套这一类功能这点结果。跟以往采用Webpack的时候所拥有的体验是一样的。
炮制一个示例：界定一个@primary-color: #1890ff，于组件样式之内径直加以运用。Vite的编译速率相较于Webpack要快出许多，保存过后近乎能够实时生效。在2022年双十二当日，我凭借这套环境开发了一个运营后台，样式编撰效率显著得到了提升。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
})
见到这篇二零二二年十二月的实战教程看完之后，你先前是否于那般Vite以及CRA之间存有过犹豫呢？欢迎于评论区域分享你当下项目所运用的脚手架以及React版本。
Comments NOTHING