vite-react

基于 Vite 工具的 react 专属配置


安装

``bash
pnpm add vite vite-react -D
`

配置迁移

$3

`diff
{
"devDependencies": {
- "@vitejs/plugin-legacy": "*",
- "@vitejs/plugin-react": "*",
- "less": "*",
- "sass": "*",
"vite": "*",
+ "vite-react": "*"
...
},
...
}
`

$3

`diff
{
"compilerOptions": {
...
- "types": ["vite/client"]
...
}
}
`

$3

`diff
- import { defineConfig } from 'vite';
+ import { defineConfig } from 'vite-react';

export default defineConfig({
...
+ react: {},
+ legacy: true | {},
+ html: false | {},
server: {
+ watchExtend: {},
+ qrcode: boolean | {}
+ https: true,
},
resolve: {
+ aliasFromTsconfig: boolean | {}
},
...
});
`

特性

- 自动使用 react/react-swc 插件
- 内置 sass 和 less 预处理器
- 自动引入 vite/client.d.ts 类型文件，无需在 tsconfig.json 中指定
- 自动识别在 tsconfig.json 中设置的路径别名
- 启动 vite 服务时默认打开浏览器
- 打包后的资源按照后缀放置到不同的文件夹
- 配置 server.https=true 时，自动生成信任的SSL证书
- css-modules 在开发模式下显示具体文件和类名，在打包时则使用哈希值
- 在指定 host 时显示链接二维码以便在手机上快速扫描访问
- .html 文件在 build 模式自动压缩

配置

react

React 项目基础插件，自动引入配置。

默认使用@vitejs/plugin-react-swc插件，其在开发环境使用 swc 替换 babel，速度会快好几倍。如果要使用基于 babel 的@vitejs/plugin-react，则可以这么配置：

`typescript
export default defineConfig({
react: {
swc: false,
},
});
`

legacy

默认值：false

使用官方 @vitejs/plugin-legacy 插件兼容不支持