• 售前

  • 售后

热门帖子
入门百科

详解antd+react项目迁移vite的解决方案

[复制链接]
乐态思 显示全部楼层 发表于 2021-10-26 13:45:07 |阅读模式 打印 上一主题 下一主题
antd+react+webpack往往是以react技能栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技能不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,由于vite太快了。经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写本钱文分享给各人。
Vite是什么


作为本文的主角,首先简朴介绍一下vite这个构建工具,该工具是尤雨溪推出的【下一代前端开辟和构建工具】,vite着实也不是一个新的工具,早在一年多从前,就已经推出了很多版本,直到2.x版本的推出,在前端圈引起了充足大的震动,标记着vite的成熟和强大,这里并不打算详细介绍vite,各人可以参考官网https://cn.vitejs.dev/ 相识。
迁徙过程


相识了vite这款工具之后,我们就可以动手预备做迁徙工作了;
1.安装vite依赖

  1. 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的简朴了许多,而且很多功能都是内置的,比如对静态资源的处置惩罚,功能开启也比较简朴,具体如下:
  1. import { defineConfig } from 'vite';
  2. import vitePluginHtml from 'vite-plugin-html';
  3. import reactRefresh from '@vitejs/plugin-react-refresh';
  4. export default defineConfig({
  5.     css: {
  6.         preprocessorOptions: {
  7.             less: {
  8.                 javascriptEnabled: true,
  9.             },
  10.         }
  11.     },
  12.     publicDir: './src/configs',
  13.     plugins: [
  14.         reactRefresh(),
  15.         antdViteImportPlugin(),
  16.         vitePluginHtml({
  17.             minify: true,
  18.             inject: {
  19.                 injectData: {
  20.                     title: 'vite-react-example',
  21.                     injectScript: '<script src="/configs.js"></script>', // publicDir作为根目录
  22.                 },
  23.                 injectOptions: {
  24.                     filename: './index.html', // 模板页
  25.                 }
  26.             },
  27.         }),
  28.     ],
  29.     server: {
  30.         open: true,
  31.         port: 10010,
  32.     }
  33. });
复制代码
这里我们利用了vite-plugin-html插件作为html-webpack-plugin的替换方案,此中必要留意injectData和injectOptions选项,injectData可以方便的往我们的模板页中插入自定义数据,injectOptions可以指定模板页,还有其他设置项可以参考https://www.npmjs.com/package/vite-plugin-html 。相应的必要改造index.html页面:
  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title><%- title %></title>
  5.     ......
  6. </head>
  7. <body>
  8.     <div id="app"></div>
  9.     <script>
  10.         var global = globalThis || window; // 防止启动报错
  11.     </script>
  12.     <%- injectScript %>
  13.     <script type="module" src="/src/index.jsx"></script>
  14. </body>
  15. </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.添加启动脚本

  1. "scripts": {
  2. "dev": "vite",
  3. "build": "vite build",
  4. ......
  5. }
复制代码
到这里应该就差不多了吧,但是环境却不是那么顺遂,项目居然跑不起来,好吧,没有那么一帆风顺的事变,接下来我们来看下遇到的标题吧。
遇到的标题


1.decorators not support


在业务代码中,我们利用了dva提供的connect来绑定状态,形如:
  1. @connect(state =&gt; state.foo)
  2. class Foo extends React.PureComponent {
  3. ....
  4. }
复制代码
但是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文件:
  1. import * as allIcons from '@ant-design/icons/lib/dist';
  2. ......
  3. ReactIcon.add.apply(ReactIcon, _toConsumableArray(Object.keys(allIcons).map(function (key) {
  4.   return allIcons[key];
  5. })));
  6. ......
复制代码
'@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:
  1. ......
  2. var allIcons = _interopRequireWildcard(require("@ant-design/icons/lib/dist"));
  3. function _interopRequireWildcard(obj) { if (obj &amp;&amp; obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" &amp;&amp; typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache &amp;&amp; cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty &amp;&amp; Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc &amp;&amp; (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; }
  4. ......
复制代码
这里_interopRequireWildcard方法帮我们处置惩罚了导出的标题,那么修改一下babel-plugin-import的设置不就好了么,好吧,没有那么轻易的,vite对babel-plugin-import支持不那么好,首先照旧去vite的issues里面找找看,有一个雷同的提问:https://github.com/vitejs/vite/issues/1389 ,看了下,并没有解决我的标题,里面提到的几个插件倒是给我了思路,那就自己写个vite插件去实现我们的需求呗。插件的思路很简朴,就是将antd组件的引入方式举行统一的修改:
  1. ---修改前---
  2. import { Button } from 'antd';
复制代码
  1. ---修改后---
  2. import Button from 'antd/lib/button';
  3. 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的解决方案的文章就介绍到这了,更多相关antd react迁徙vite内容请搜刮脚本之家从前的文章或继续浏览下面的相关文章希望各人以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作