@jikeytang
2022-02-20T08:43:31.000000Z
字数 4286
阅读 966
2022-blog
由于 react-app-rewired 当时有段时间不更新了,所以更换了 ant design 推荐的 craco。但前两者一致的的问题是热更新、编译打包速度过慢。而 umijs 速度可以,但又引入新的技术栈。那有没有即是熟悉的、速度又是可观的工具呢,这时候 vite 逐渐进入我的视野。
此项目就是为了让 vite
能够无缝支持 react 的日常开发做的一次尝试和探索。
vite
有这么几个特点:
webpack
虽然有很多的功能,而且主打的是 在前端项目中更高效地管理和维护项目中的每一个资源,对于开发者来说主要结合 babel
解决了让编程语言提前进入下一个标准直接使用用 ES6+的语法开发的便利。 vite
快有快在那里,这就说到另外一个浏览器支持的重要技术 ES Modules 的出现,它本身是 JavaScript 官方的标准化模块系统,简单说以前大家是引文件,文件里边是函数,函数是变量可访问的边界。函数的好处显而易见,不好也是一目了然:大工程的开发,跨函数变量的访问控制就显得举步维艰。那 ES Modules
就出现了,它可以从浏览器底层的角度让开发者能够以更好的方式来组织变量和函数,每个文件都是独立的作用域,变量污染不存在的。那 vite
利用这个特性,直接启动开发服务器,请求需要哪个模块再对哪个模块进行实时编译。vite
利用 ES Modules
, 将开发环境下 ES6+
模块文件作为浏览器要执行的文件,当浏览器需要某个文件时,对文件对应的开发文件进行编译,分析模块依赖、编译。这种动态的模式,缩短了编译时间,项目越大,优势越明显。当某部分内容变化时,让浏览器直接去重新请求相关文件即可,而不是像 webpack
重新将该模块的所有依赖重新编译。其它的对比可以看看这个,浅谈Vite 原理与 Webpack比较配置易上手
配置都是简单明了的,但是随着版本的更新,都有变化,开发时以 官方文档 为准。
先看一下我们完成的效果
react-tiger-admin
之外还有 vue2-tiger-admin,vue3-tiger-admin 正在紧张的赶工中,angular-tiger-admin 本人实在太菜 ng
的精髓没有能够短时间内掌握,所以这个还是一个半成品状态。vite
热更新,编译打包发布到 gitee pages 上。技术 | 说明 | 官网 |
---|---|---|
Vite | 下一代前端开发与构建工具 | https://cn.vitejs.dev/ |
React | 用于构建用户界面的 JavaScript 库 | https://reactjs.org/ |
React-router | 官方的路由管理器 | https://github.com/remix-run/react-router |
Typescript | 类型约束 | https://www.typescriptlang.org/ |
Mobx | 全局状态管理模式 | https://mobx.js.org/ |
Axios | 基于promise 的HTTP 库 | https://github.com/axios/axios |
Ant-design | UI组件库 | https://ant-design.gitee.io/ |
Ahooks | 一套高质量可靠的 React Hooks 库 | https://ahooks.js.org/ |
Fastmock | 简单好用的在线接口 MOCK 平台 | https://fastmock.site/ |
Momentjs | JavaScript 日期处理类库 | http://momentjs.cn/ |
LESS | CSS预处理器 | https://lesscss.org/ |
Tinymce | 可视化HTML编辑器 | https://www.tiny.cloud/ |
React-icons | 图标字体库 | https://react-icons.github.io/react-icons/icons |
系统 | 工具 | 官网 |
---|---|---|
VScode | 主开发工具 | https://code.visualstudio.com/ |
Webstorm | 辅开发工具 | https://www.jetbrains.com/webstorm/ |
Atom | 源码阅读 | https://atom.io/ |
Cmder | Cmd替代工具[windows] | https://cmder.net/ |
Notepad2 | 单文件编辑[windows] | http://www.flos-freeware.ch/notepad2.html |
Coteditor | 单文件编辑[mac] | https://coteditor.com/ |
Chrome | 调试工具 | https://www.google.com/intl/zh-CN/chrome/ |
.
├── 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
根据 npx create-react-app my-app --template typescript
命令创建支持 typescript
的项目,并安装依赖,如果是 yarn
工具同理。
vite
官网格式,创建 vite.config.js
,vite
支持 react
的插件 @vitejs/plugin-reactbase
路径配置,主要保证发布二级目录资源能够访问正确。比如,发布到 http://jsfront.gitee.io/react-tiger-admin
那这儿的 base
development
下是:./
, production
就是 /react-tiger-admin/
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,
},
},
},
public
下 index.html
到根目录由于 vite
的特殊约定,所以不得不手动拷贝此文件,扩展阅读 index.html 与项目根目录,如果不执行此操作,则项目页空白,虽然 vite
能够启动成功,但页面为空白。
index.html
文件增加访问路径增加可访问的路径入口,比如:
<script type="module" src="/src/index.tsx"></script>
package.json script
如下所示
"scripts": {
"start": "vite",
"build": "vite build",
},
到此时,然后增加相关的 eslint
,prettierrc
等等的配置之后,项目就可以完整的运行起来了,看见了熟悉的 react logo
心中难免一阵激动,然后随便修改个文件,hmr 秒更新,一句窝草脱口而出。
// 切换环境
nvm install 16.0.0
nvm use 16.0.0
// 安装依赖
npm install
// 启动项目
npm start
无论之前项目是 react-scripts,还是 react-app-rewired
, craco
都可以用 vite
来进行开发,具体的步骤如上 #3.2 - #3.5 所示,带来的不便,所有的错误信息不像以前直接打印在页面上,而是打印在 Dev Tool
的控制台中。
@vitejs/plugin-react
插件,@vitejs/plugin-react
与 @vitejs/plugin-react-resfresh
冲突,用一个即可vite
不能识别环境变量中类似 REACT
的变量,理由是 为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。,如 REACT_APP_BASE_URL
,必须 VITE
开始,如 VITE_BASE_URL
。扩展学习:vite 环境变量和模式如果还想找回此文,您可以点右上角 💖Star 💖 收藏 + 支持