如何记录Vite React开发构建环境搭建过程？

本文共计1661个文字，预计阅读时间需要7分钟。

目录+前言+使用 create-vite 脚手架生成基础模板+集成 Eslint+Prettier+React Router+Ant Design+别名+Less 与 CSS Module+总结+前言+使用 Vite 已有两年，期间用它开发过单页面应用和浏览器扩展插件+

目录

• 前言
• 使用 create-vite 脚手架生成基础模板
• eslint
• prettier
• react-router
• antd
• 别名
• Less 与 CSS Module
• 总结

前言

使用 Vite 已经有两年了，期间使用它开发过单页面应用，也开发过浏览器扩展插件，对比日常工作中用到的 webpack 构建速度大幅提升，开发体验也好很多。
虽然相比于 webpack 来说简单了很多，但是仍然有一些配置需要记录一下，以便之后可以快速搭建一个本地开发构建的环境。

使用 create-vite 脚手架生成基础模板

运行命令安装脚手架

yarn create vite

我在安装时提供的命令行选项那里，选择了 React + TypeScript。

使用下面的命令启动项目

yarn dev

此时的项目已经默认集成了 @vitejs/plugin-react 这个插件。

到这一步其实就已经基本结束了，自动集成 HMR，jsx，ts，css module，资源打包等一系列功能。