如何通过Vite React搭建高效且稳定的长期开发与构建环境？

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

目录前言使用 create-vite 脚手架生成基础模板配置 ESLint 和 Prettier集成 react-router 和 antd别名配置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，资源打包等一系列功能。