- A+
前言
使用 Vite 已经有两年了，期间使用它开发过单页面应用，也开发过浏览器扩展插件，对比日常工作中用到的 webpack 构建速度大幅提升，开发体验也好很多。
虽然相比于 webpack 来说简单了很多，但是仍然有一些配置需要记录一下，以便之后可以快速搭建一个本地开发构建的环境。
使用 create-vite 脚手架生成基础模板
运行命令安装脚手架
yarn create vite 我在安装时提供的命令行选项那里，选择了 React + TypeScript。
使用下面的命令启动项目
yarn dev 此时的项目已经默认集成了 @vitejs/plugin-react 这个插件。
到这一步其实就已经基本结束了，自动集成 HMR，jsx，ts，css module，资源打包等一系列功能。
相比于 webpack，简直不要太友好。
eslint
先安装 eslint：
yarn add eslint -D 然后初始化eslint配置：
yarn eslint --init 选择选项后，我自己安装的库大致是：
eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.0.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 typescript@* // 这个可以移除 之后有两个方案：
- 方案一，使用vite-plugin-eslint，这个会在报错时在页面上显示报错信息。
- 方案二，使用 VSCode 的 ESlint 插件去使用 ESLint，这个是在代码上出现红线报错。（个人更喜欢这种）
方案二直接用插件即可，方案一需要安装一下库：
yarn add vite-plugin-eslint -D 安装完毕后，在vite.config.ts中配置：
//... import eslint from "vite-plugin-eslint"; export default defineConfig({ plugins: [react(), eslint()], //... }); 无论方案一还是方案二，此时仍会报错，因为 ESLint 无法解析 ts 代码，所以还需要安装 @typescript-eslint/parser
yarn add @typescript-eslint/parser -D 最后你还需要在.eslintrc.json 加上这行配置：
"parserOptions": { //... "project": "tsconfig.json" }, 基本完毕。
为什么说是基本？因为 eslint 配置还是更多跟代码习惯有关，比如单双引号的使用之类的，所以刚配置完一般都一堆报错，还需要自己去慢慢调整。
而且还涉及到与 prettier 的配置相冲突的问题,eslint 和 prettier 的配置分别是代码校验和代码格式化时的规则，所以也是要保证规则一致的。
手动调整规则太繁琐了,一般使用eslint-config-prettier禁用掉 ESLint 中和 Prettier 配置有冲突的规则,然后用eslint-plugin-prettier保证 eslint 用 prettier 的风格校验。
yarn add eslint-config-prettier eslint-plugin-prettier -D 然后在.eslintrc.json 中加上配置:
{ "extends": [ //... "plugin:prettier/recommended" ], } 另外根据需要一般常用的配置列一下：
{ "rules": { "react/react-in-jsx-scope":"off", // 使用 jsx 时不需要引用 React "@typescript-eslint/strict-boolean-expressions":"off" // 表达式中的布尔值必须严格是布尔类型 } } prettier
安装
yarn add prettier -D 根目录下新建.prettierrc 配置文件,然后给个我自己用的配置方案:
{ printWidth: 100, tabWidth: 4, useTabs: false, singleQuote: true, jsxSingleQuote: false, endOfLine: 'lf' } 一般这个配合 VSCode 的 Prettier 插件和保存时格式化即可。
另外，对于 lf 和 crlf 的处理，保存时没法切换，需要在 VSCode 中设置。
react-router
安装：
yarn add react-router-dom 然后修改 main.tsx 中的代码吧：
//... import {RouterProvider} from "react-router-dom"; import router from './router'; //... ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> ); 这里我将路由相关代码放在了单独的路由文件 router.tsx 中：
import { createBrowserRouter } from 'react-router-dom'; import Framework from './Framework'; import Error from './Error'; import Home from '@/pages/home'; import About from '@/pages/about'; const router = createBrowserRouter([ { path: '/', element: <Framework />, errorElement: <Error />, children: [ { path: 'home', element: <Home />, }, { path: 'about', element: <About />, }, ], }, ]); export default router; antd
安装命令：
yarn add antd 然后在主 less 文件中加上代码：
@import 'antd/es/style/themes/default.less'; @import 'antd/dist/antd.less'; @primary-color: #4294ff; // 更换全局主色 然后还需要更改 vite.config.ts：
//... export default defineConfig({ //... css: { preprocessorOptions: { less: { javascriptEnabled: true, }, }, }, }); 别名
通常我们会使用下面的方式来使用别名：
import reactLogo from "@/assets/react.svg"; 默认情况下，会直接报错，所以我们需要在vite.config.ts进行如下配置：
//... import path from "path"; export default defineConfig({ //... resolve: { alias: { "@": path.resolve(__dirname, "src"), }, }, }); 这里因为没有 path 这个依赖库，所以还要运行命令安装：
yarn add path -D 此时别名功能已经可以正常使用，但是__dirname会报红，需要安装@types/node
yarn add @types/node -D 这时别名时没有智能提示的，所以还需要在tsconfig.json中，配置：
{ "compilerOptions": { //... "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, } 完毕。
Less 与 CSS Module
Vite 已集成了 CSS Module 功能，但是想要使用 Less 还需要安装 less 这个库。
yarn add less 最后使用的方式如下：
import styles from "./App.module.less"; 总结
暂时就记录这么多吧，后续如果有一些别的功能配置，也会统一记录在这篇博客。
示例代码仓库：vite-react-practice。
