antd+react项目迁移vite的解决方案
antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了。经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家。
Vite是什么
作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的【下一代前端开发和构建工具】,vite其实也不是一个新的工具,早在一年多以前,就已经推出了很多版本,直到2.x版本的推出,在前端圈引起了足够大的震动,标志着vite的成熟和强大,这里并不打算详细介绍vite,大家可以参考官网https://cn.vitejs.dev/ 了解。
迁移过程
了解了vite这款工具之后,我们就可以着手准备做迁移工作了;
1.安装vite依赖
npm i vite antd-vite-import-plugin @vitejs/plugin-react-refresh vite-plugin-html -D
2.更新项目原有依赖项
这里我们项目使用的是dva+antd3.x作为基础的开发框架,这里我将系统的主要依赖项都升级到了最新的版本,比如dva我用的2.6.0-beta.22版本,其他附带的react、react-dom、react-router-dom及@babel/plugin-transform-runtime等相关依赖项都更新了(antd还是3.x版本,暂未更新到4.x的大版本),这一块取决于自己的实际需求;
3.项目根目录添加vite.config.js配置文件
和webpack的配置文件比起来,vite的简单了许多,而且很多功能都是内置的,比如对静态资源的处理,功能开启也比较简单,具体如下:
import { defineConfig } from 'vite';
import vitePluginHtml from 'vite-plugin-html';
import reactRefresh from '@vitejs/plugin-react-refresh';
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
}
},
publicDir: './src/configs',
plugins: [
reactRefresh(),
antdViteImportPlugin(),
vitePluginHtml({
minify: true,
inject: {
injectData: {
title: 'vite-react-example',
injectScript: '<script src="/configs.js"></script>', // publicDir作为根目录
},
injectOptions: {
filename: './index.html', // 模板页
}
},
}),
],
server: {
open: true,
port: 10010,
}
});
这里我们使用了vite-plugin-html插件作为html-webpack-plugin的替代方案,其中需要注意injectData和injectOptions选项,injectData可以方便的往我们的模板页中插入自定义数据,injectOptions可以指定模板页,还有其他配置项可以参考https://www.npmjs.com/package/vite-plugin-html 。相应的需要改造index.html页面:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title><%- title %></title>
......
</head>
<body>
<div id="app"></div>
<script>
var global = globalThis || window; // 防止启动报错
</script>
<%- injectScript %>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
和webpack有差异的是,这里我们需要手动指定一下入口文件,script的标签type为module。
4.修改文件后缀
这里的文件是以js作为后缀的react组件,在webpack构建平台下,js(x)
、ts(x)
都是没啥问题的,但如果使用vite的话,那么最好是ts
、 jsx
、 tsx
的后缀文件,关于这个问题,可以看下这个issue:https://github.com/vitejs/vite/issues/1552 ,最后作者发出批量改个后缀有这么难
的吐槽,算了,还是改吧,如果觉得手动改麻烦,写个脚本也不是啥难事。
5.添加启动脚本
"scripts": {
"dev": "vite",
"build": "vite build",
......
}
到这里应该就差不多了吧,但是情况却不是那么顺利,项目居然跑不起来,好吧,没有那么一帆风顺的事情,接下来我们来看下遇到的问题吧。
遇到的问题
1.decorators not support
在业务代码中,我们使用了dva提供的connect来绑定状态,形如:
@connect(state => state.foo)
class Foo extends React.PureComponent {
....
}
但是decorators语法居然不被vite支持,关于这个问题,也有一个issus:https://github.com/vitejs/vite/issues/2349 ,目前没有一个好的解决办法,只好去掉decorators,改用常规的函数绑定了。
2.antd Unknown theme type: undefined, name: undefined
我们项目目前还是使用的antd的3.x版本,在启动时就出现了这个错误,其实主要是antd组件初始化的时候,加载了antd/es/icon/index.js文件:
import * as allIcons from '@ant-design/icons/lib/dist';
......
ReactIcon.add.apply(ReactIcon, _toConsumableArray(Object.keys(allIcons).map(function (key) {
return allIcons[key];
})));
......
'@ant-design/icons/lib/dist'导出的对象是{ default: {...} },要正确访问的形式是allIcons.default,而不是allIcons,因此导致获取不到icon的正确导出对象,关于这个问题,大家可以看下这个issue:https://github.com/ant-design/ant-design/issues/19002 ,这里要说明的一点是antd4.x版本不会出现,但是对于我们的项目来讲,目前还不会升级到4这个大版本,那么怎么解决呢,其实只要引用antd/lib下的组件,就没有这个问题了,我们可以看下antd/lib/icon/index.js:
......
var allIcons = _interopRequireWildcard(require("@ant-design/icons/lib/dist"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
......
这里_interopRequireWildcard方法帮我们处理了导出的问题,那么修改一下babel-plugin-import的配置不就好了么,好吧,没有那么容易的,vite对babel-plugin-import支持不那么好,首先还是去vite的issues里面找找看,有一个类似的提问:https://github.com/vitejs/vite/issues/1389 ,看了下,并没有解决我的问题,里面提到的几个插件倒是给我了思路,那就自己写个vite插件去实现我们的需求呗。插件的思路很简单,就是将antd组件的引入方式进行统一的修改:
---修改前---
import { Button } from 'antd';
---修改后---
import Button from 'antd/lib/button';
import 'antd/lib/button/style/index.css';
这里需要说明的是css样式的引入,如果引入style/index或者style/css,会出现require is not defined的问题,因为这两个js文件中使用了require,但是vite在预编译时不是node环境,当然就报错了。
关于这个插件的使用,可以参考https://www.npmjs.com/package/antd-vite-import-plugin 。
3.'default' is not exported
有时候三方依赖项加载会出错,例如'default' is not exported等,这里可以参考https://github.com/vitejs/vite/issues/2679
在实际开发过程中,还是难免遇到一些奇怪的问题,这都是尝鲜的代价。
速度之争
vite的一个优势就是快,那么和webpack相比,到底有多大的差距呢,这里我们用webpack和vite分别启动同一个本地项目:
构建工具 | 启动时间(ms) |
---|---|
vite | 702ms |
webpack | 7093ms |
这里只是一个粗略的对比,从数据上看有十倍之差,单从速度上讲,vite是很快了,根据官网的解释,Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
最后
经历过一番折腾后,觉得vite2的成熟度有所欠缺,在一些小项目中可以试试。对我而言还是决定先用webpack吧,毕竟webpack经过这么多年的发展,坑很少,而目前vite对于react来说还是不那么完美。
福袋
antd+react项目迁移vite的解决方案的更多相关文章
- 七天接手react项目 系列 —— 尾篇(antd 和 mobx)
其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...
- react项目中antd组件库的使用需要注意的问题
antd是蚂蚁金服推出的ui组件库,给我们在react项目开发中提供了大大的便利.但在使用的过程中,或多或少的会遇到一些问题,毕竟,用的是别人的东西,就得遵守别人的规则嘛!官方文档:https://a ...
- 使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目
1.安装.构建 # 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app my-app cd my-app ...
- react项目使用antd
在开始实践之前要确保搭建React单页面开发环境,如果还没有搭建好开发环境的朋友请移步到如何搭建React单页面开发环境. 首先在命令行模式下创建一个React项目(项目名使用小写字母命名):(win ...
- react项目中使用less并修改antd主题样式
一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...
- idea ssm项目迁移到另一台机器上时出现不能正常启动项目的解决方案
首先右下角提示关联spring文件,关联之,然后启动,发现项目无法启动,然后开始排错 首先从这个日志里发现了这么一条提示信息 然后百度了一下,答案都是说 web.xml 之类的 spring拦截器问题 ...
- (转)react 项目构建
原文:https://segmentfault.com/a/1190000016342792 写在前面 每次构建react项目的时候都会配置一大堆东西,时间久了就会忘记怎么配置.为了方便自己记忆也为了 ...
- react项目结合echarts,百度地图实现热力图
一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...
- 《Node+MongoDB+React 项目实战开发》已出版
前言 从深圳回长沙已经快4个月了,除了把车开熟练了外,并没有什么值得一提的,长沙这边要么就是连续下一个月雨,要么就是连续一个月高温暴晒,上班更是没啥子意思,长沙这边的公司和深圳落差挺大的,薪资也是断崖 ...
随机推荐
- mysql数据库表引入redis解决方案
缓存方案 缓存方案在我的另外一篇博客里有详细说明,地址:https://www.cnblogs.com/wingfirefly/p/14419728.html 数据结构: 方案1: 1.存储结构采用h ...
- 使用RSEM进行转录组测序的差异表达分析
仍然是两年前的笔记 1. prepare-reference 如果用RSEM对比对后的bam进行转录本定量,则在比对过程中要确保比对用到的索引是由rsem-prepare-reference产生的. ...
- Linux安装jdk(两种方式)
最近在研究大数据方面的东西,业务场景是从设备采集数据经过处理然后存放DB. 建设上面的环境第一步肯定是安装jdk,所以和大家一起学一下基本知识centos7.5安装jdk1.8. 安装jdk有两种方法 ...
- 基于docker快速搭建hbase集群
一.概述 HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文"Bigtable:一个结构化数据的分布式存储系统".就像Bigt ...
- 后端程序员之路 13、使用KNN进行数字识别
尝试一些用KNN来做数字识别,测试数据来自:MNIST handwritten digit database, Yann LeCun, Corinna Cortes and Chris Burgesh ...
- HTML:HTML基础
HTML不是一门编程语言,而是一种用于定义内容结构的标记语言.HTML由一系列元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或工作.一对标签可以为一段文字或者一张 ...
- 通过 .NET NativeAOT 实现用户体验升级
前言 TypedocConverter 是我先前因帮助维护 monaco-editor-uwp 但苦于 monaco editor 的 API 实在太多,手写 C# 的类型绑定十分不划算而发起的一个项 ...
- 基于 react + electron 开发及结合爬虫的应用实践🎅
前言 Electron 是一个可以使用 Web 技术如 JavaScript.HTML 和 CSS 来创建跨平台原生桌面应用的框架.借助 Electron,我们可以使用纯 JavaScript 来调用 ...
- 测试成长记录:python调adb无法获取设备信息bug记录
背景介绍: 一直在负责公司Android自动化的编写工作,采用的是uiautomator2,需要获取设备id来连接设备,就是 adb devices 问题描述: 之前一直用 subprocess.ch ...
- docker nacos 集群部署
1.准备机器3台 192.168.101.14 192.168.101.15 192.168.101.16 2.初始化sql(如果我们要搭建集群的话,那么肯定是不能用内嵌的数据库,不然数据无法共享.集 ...