react-tiger-admin

2022-blog

1. 背景

由于 react-app-rewired 当时有段时间不更新了，所以更换了 ant design 推荐的 craco。但前两者一致的的问题是热更新、编译打包速度过慢。而 umijs 速度可以，但又引入新的技术栈。那有没有即是熟悉的、速度又是可观的工具呢，这时候 vite 逐渐进入我的视野。
此项目就是为了让 vite 能够无缝支持 react 的日常开发做的一次尝试和探索。

vite有这么几个特点：

• 快速的服务启动
  那其它工具启动慢的原因是什么呢，比如 webpack，它是先进行一次打包过程，然后再启动开发服务器，最终浏览器访问的是打包后的结果。那另外一个问题就是，当时为什么要用这个工具呢？ webpack 虽然有很多的功能，而且主打的是 在前端项目中更高效地管理和维护项目中的每一个资源，对于开发者来说主要结合 babel 解决了让编程语言提前进入下一个标准直接使用用 ES6+的语法开发的便利。
  那 vite 快有快在那里，这就说到另外一个浏览器支持的重要技术 ES Modules 的出现，它本身是 JavaScript 官方的标准化模块系统，简单说以前大家是引文件，文件里边是函数，函数是变量可访问的边界。函数的好处显而易见，不好也是一目了然：大工程的开发，跨函数变量的访问控制就显得举步维艰。那 ES Modules 就出现了，它可以从浏览器底层的角度让开发者能够以更好的方式来组织变量和函数，每个文件都是独立的作用域，变量污染不存在的。那 vite 利用这个特性，直接启动开发服务器，请求需要哪个模块再对哪个模块进行实时编译。
• 快速的热更新
  vite 利用 ES Modules, 将开发环境下 ES6+ 模块文件作为浏览器要执行的文件，当浏览器需要某个文件时，对文件对应的开发文件进行编译，分析模块依赖、编译。这种动态的模式，缩短了编译时间，项目越大，优势越明显。当某部分内容变化时，让浏览器直接去重新请求相关文件即可，而不是像 webpack 重新将该模块的所有依赖重新编译。其它的对比可以看看这个，浅谈Vite 原理与 Webpack比较
• 功能比较强大
  提供各种插件，官方插件

• 配置易上手
  配置都是简单明了的，但是随着版本的更新，都有变化，开发时以 官方文档 为准。

  先看一下我们完成的效果

  • react-tiger-admin - Preivew
  • react-tiger-admin - Gitee
  • 教程地址

2. 相关介绍

2.1 基本介绍

• react-tiger-admin 之外还有 vue2-tiger-admin，vue3-tiger-admin 正在紧张的赶工中，angular-tiger-admin 本人实在太菜 ng 的精髓没有能够短时间内掌握，所以这个还是一个半成品状态。
• 本项目全部由 vite 热更新，编译打包发布到 gitee pages 上。

2.2 技术栈

2.3 开发工具

2.4 文件结构

.
├── LICENSE                // MIT 开源协议
├── dist                   // Gitee 发布依赖目录
├── index.html             // vite 入口目录
├── public                 // 公共资源
├── src
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── api                // 请求文件
│   ├── assets             // 静态资源
│   ├── common             // 公共资源
│   ├── components         // 公共组件
│   ├── hooks              // 公共 hooks
│   ├── index.tsx
│   ├── typings            // 公共 interface, type
│   ├── layouts            // 布局
│   ├── pages              // 所有页面
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   ├── router             // 路由文件
│   ├── setupTests.ts
│   ├── store              // mobx 文件
│   ├── styles             // 所有 less 文件
│   └── utils              // 工具文件
├── tsconfig.json
└── vite.config.js

3. 开发步骤

3.1 创建项目

根据 npx create-react-app my-app --template typescript 命令创建支持 typescript 的项目，并安装依赖，如果是 yarn 工具同理。

3.2 创建配置文件

• 根据 vite 官网格式，创建 vite.config.js，
• 安装 vite 支持 react 的插件 @vitejs/plugin-react
• base 路径配置，主要保证发布二级目录资源能够访问正确。比如，发布到 http://jsfront.gitee.io/react-tiger-admin 那这儿的 base development下是：./， production 就是 /react-tiger-admin/
• define，增加全量 process.env 支持，如果不增加，则 process.env 不能够被访问
• 增加别名支持 alias，从此在 pages 下访问资源可以以 @开始，比如访问某组件：@/components/Icon

alias: [
    { find: '@', replacement: path.resolve(__dirname, 'src') },
],

• 为 less 增加全局变量支持

css: {
    preprocessorOptions: {
        less: {
            additionalData: '@import "src/styles/_variables.less";', 
            javascriptEnabled: true,
        },
    },
},

• 处理跨域问题
  可以通过 server 入口来配置，server.proxy

3.3 拷贝 public 下 index.html到根目录

由于 vite的特殊约定，所以不得不手动拷贝此文件，扩展阅读 index.html 与项目根目录，如果不执行此操作，则项目页空白，虽然 vite 能够启动成功，但页面为空白。

3.4 为 index.html 文件增加访问路径

增加可访问的路径入口，比如：

<script type="module" src="/src/index.tsx"></script>

3.5. 修改 package.json script

如下所示

"scripts": {
    "start": "vite",
    "build": "vite build",
},

到此时，然后增加相关的 eslint，prettierrc 等等的配置之后，项目就可以完整的运行起来了，看见了熟悉的 react logo 心中难免一阵激动，然后随便修改个文件，hmr 秒更新，一句窝草脱口而出。

3.6. 快速启动

// 切换环境
nvm install 16.0.0
nvm use 16.0.0
// 安装依赖
npm install
// 启动项目
npm start

4. 旧项目改造

无论之前项目是 react-scripts，还是 react-app-rewired， craco 都可以用 vite 来进行开发，具体的步骤如上 #3.2 - #3.5 所示，带来的不便，所有的错误信息不像以前直接打印在页面上，而是打印在 Dev Tool 的控制台中。

5. FAQ

• ReferenceError: React is not defined
  需要安装 @vitejs/plugin-react 插件，@vitejs/plugin-react 与 @vitejs/plugin-react-resfresh 冲突，用一个即可
• Uncaught ReferenceError: process is not defined
  由于是 vite 不能识别环境变量中类似 REACT 的变量，理由是 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。，如 REACT_APP_BASE_URL，必须 VITE 开始，如 VITE_BASE_URL。扩展学习：vite 环境变量和模式
• vite项目报错：ReferenceError: require is not defined
  报错原因：require不属于vite里的方法，解决办法 vite 静态资源处理

如果还想找回此文，您可以点右上角 💖Star 💖 收藏 + 支持