Skip to content

geekact/vite-react

Repository files navigation

vite-react

基于 Vite 工具的 react 专属配置

npm peer dependency vite version npm License Code Style

安装

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
IE
Edge
Edge
Chrome
Chrome
Firefox
Firefox
Safari
Safari
Opera
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 优化