基于 [Vite](https://github.com/vitejs/vite) 工具的 react 专属配置
npm install vite-react基于 Vite 工具的 react 专属配置




``bash`
pnpm add vite vite-react -D
`diff`
{
"devDependencies": {
- "@vitejs/plugin-legacy": "*",
- "@vitejs/plugin-react": "*",
- "less": "*",
- "sass": "*",
"vite": "*",
+ "vite-react": "*"
...
},
...
}
`diff`
{
"compilerOptions": {
...
- "types": ["vite/client"]
...
}
}
`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
- 自动识别在 中设置的路径别名server.https=true
- 启动 vite 服务时默认打开浏览器
- 打包后的资源按照后缀放置到不同的文件夹
- 配置 时,自动生成信任的SSL证书host
- css-modules 在开发模式下显示具体文件和类名,在打包时则使用哈希值
- 在指定 时显示链接二维码以便在手机上快速扫描访问
- .html 文件在 build 模式自动压缩
React 项目基础插件,自动引入配置。
默认使用@vitejs/plugin-react-swc插件,其在开发环境使用 swc 替换 babel,速度会快好几倍。如果要使用基于 babel 的@vitejs/plugin-react,则可以这么配置:
`typescript`
export default defineConfig({
react: {
swc: false,
},
});
默认值:false
使用官方 @vitejs/plugin-legacy 插件兼容不支持