vite-react

基于 Vite 工具的 react 专属配置

安装

pnpm add vite vite-react -D

配置迁移

package.json

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

tsconfig.json

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

vite.config.ts

- 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，则可以这么配置：

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

legacy

默认值：false

使用官方 @vitejs/plugin-legacy 插件兼容不支持 <script type="module"> 标签引入 JS 文件的浏览器。

列举主流浏览器的支持情况：

| 浏览器 | IE | Edge | Chrome | Firefox | Safari | Opera | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | 开始版本 | ❌ | 16 | 61 | 60 | 10.1 | 48 | | 发布时间 | ❌ | 2017.10.17 | 2017.09.05 | 2018.05.09 | 2017.05.27 | 2017.09.27 |

更多浏览器以及手机浏览器兼容性可参考 https://caniuse.com/es6-module

开启 legacy 方式：

export default defineConfig({
  legacy: true,
});

当然也可以配置一些参数。具体配置请参考 官方文档

export default defineConfig({
  legacy: {
    targets: ['chrome >= 50', 'not dead'],
  },
});

html

对 html 文件进行打包、压缩、传值、实现多页面等处理。请查看官方文档 vite-plugin-html

export default defineConfig({
  html: {
    // ...
  },
});

server.watchExtend

使用插件 vite-plugin-restart 额外监听文件变化，可重启 vite 服务或者刷新页面。

export default defineConfig({
  server: {
    watchExtend: {
      restart: [], // 重启服务
      reload: [], // 刷新页面
    },
  },
});

server.qrcode

默认值：true

在开发时使用了 host 时，使用插件 vite-plugin-qrcode 在终端生成二维码，方便手机立即扫码访问。

export default defineConfig({
  server: {
    qrcode: true | false | {},
  },
});

server.https

设置成true时，使用插件 vite-plugin-mkcert 自动生成信任证书并使用http2访问资源

resolve.aliasFromTsconfig

默认值：true

使用插件 vite-tsconfig-paths 自动识别tsconfig.json配置中设置的路径别名，省去了重复配置别名的麻烦。

export default defineConfig({
  resolve: {
    aliasFromTsconfig: true | false | {},
  },
});

温馨提示

• 使用 css-modules 时，建议安装 vscode 插件 clinyong.vscode-css-modules 以获得更多提示
• 尽量使用 lodash-es 代替 lodash 以获得 tree-shaking 优化