Closed chenshuai2144 closed 2 years ago
太棒了,赞一下
赞赞赞 支持
5.0.0-beta.2 升级的时候出现 Error: Parse file G:/project/antd/antdesign/node_modules/dumi-theme-default/src/builtins/Previewer.tsx failed, Parse error @:142:13 at G:\project\antd\antdesign\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\getDepReExportContent.js:96:13 at Generator.throw (<anonymous>) at asyncGeneratorStep (G:\project\antd\antdesign\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\getDepReExportContent.js:45:103) at _throw (G:\project\antd\antdesign\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\getDepReExportContent.js:47:291) at processTicksAndRejections (internal/process/task_queues.js:93:5)
,怎么解决?
尝试一下全部清空数据
赞赞赞
刚好在做后台框架选型, 值得尝试一波
做为企业级管理后台,真心希望官方支持页面多标签切换
做为企业级管理后台,真心希望官方支持页面多标签切换
可以尝试一下https://github.com/alitajs/umi-plugin-keep-alive,多页签感觉很不好,可以只缓存当前页在详情页返回的时候存在index 状态活性就好
请问使用v5 beta版本的如何升级到正式版本?
请问使用v5 beta版本的如何升级到正式版本?
改一下版本号就好了,没什么大的变化
在哪里下载正式版?
在哪里下载正式版?
老样子, yarn create umi
自荐一个配合 AntdPro 写CRUD的框架,有完整的Demo和Doc
https://standadmin.github.io/stand-admin-antdpro-demo/index.html
与 ProCompoents 的思路有些差异,更加专注于逻辑,把UI层面的控制权留给开发者
👍,可以坐等low-code了
这玩意能控制一下依赖包的大小吗?都快1G了。
在哪里下载正式版?
老样子,
yarn create umi
下下来还是beta3…………
自荐免费课程: 《基于Ant Design Pro v5和Formily v1的动态模型网站后台》 https://www.bilibili.com/video/BV1g54y187LJ/
同时,我希望umi团队尽快推进处理umi+useRequest这一最佳组合存在的组件单元测试问题。https://github.com/umijs/umi/discussions/6740
在哪里下载正式版?
老样子,
yarn create umi
npx create-umi does not work because of branch name is different. v5 branch does not exists.
V5在哪里安装呢?现在create umi安装不了了
v5已经正式发布,现在安装好就是v5了,没有v4 v5选择的选项了。 umijs/create-umi@bcc36b5
OpenAPI 可以自定义生成代码吗? @umijs/openapi 没有仓库,是不开源的吗? 现在遇到一些问题,比如重名、上传接口判断逻辑不完善等。
现在相当依赖生成接口代码这个工具,请求帮助。
V5在哪里安装呢?现在create umi安装不了了
gitee.com 没有同步5.0,create-umi getFastGithub 选 gitee.com 结果安装了4.5 @afc163
V5在哪里安装呢?现在create umi安装不了了
v5已经正式发布,现在安装好就是v5了,没有v4 v5选择的选项了。 umijs/create-umi@bcc36b5
我试了下 我安装好是v.4.5版本。怎么安v5.我开发的我又看了下之前是beta5.0
结果安装了4.5 @afc163
选simple
结果安装了4.5 @afc163
选simple
complete 不是完整的吗
结果安装了4.5 @afc163
选simple
complete 不是完整的吗 介个?
做为企业级管理后台,真心希望官方支持页面多标签切换
可以基于tab组件,缓存history 然后魔改样式
做为企业级管理后台,真心希望官方支持页面多标签切换
可以基于tab组件,缓存history 然后魔改样式
可以整理贡献嘛
不知不觉已经用了快一年了,在这过程中,有体验到各种便利,也遇到过各种bug,但这都不影响我对蚂蚁金服体验部的团队尊敬,感谢你们的付出👍🏻 ,希望你们做的越来越好🎉 🎉 。
距离上次 Pro 发布已经过去了两年,这两年间前端的生态也发生了一些变化, Low-Code 大行其道,Bundleless 也随着 Snowpack,Vite 的发布越来越火热,前端在国际化,权限,数据流和布局方面已经有了最佳实践。 Ant Design Pro 致力于提升中后台的开发体验,在这些领域我们也提出了自己的解决方案。
我们基于以上的问题,分别提供了最佳实践,模板组件,编译提速,项目集成组件,OpenAPI五项重大功能更新,接下来我会详细介绍这些功能。
🍣 最佳实践
在 V5 中我们基于内外部的经验对中后台的常用领域做出了抽象,Ant Design Pro 研发框架基于 umi,在 V5 中我们通过一系列 umi 插件提供了一套中后台最佳实践。Pro 内置了以下的插件:
这些插件都支持快速关闭,方便我们组合这些能力。同时基于 umi 的运行时的能力,这些 API 都可以从 umi 中直接导出。
📯 数据流插件
在过去的几年中,前端一直都使用 redux 来作为默认的数据流方案,但是 redux 系列一直存在样板代码多,代码提示效果差等问题,导致开发体验一直不是很好。虽然 redux 的功能很强大, 但是在中后台开发中全局公用数据较少,没有忒额复杂的数据流。借着 hooks 的东风我们在 V5 中提供了一个轻量的数据流方案 plugin-model 。
plugin-model 提供了 hooks 方案的 API, 并且基于 umi 的运行时能力提供了实时的 TypeScript 提示。
🌎 国际化插件
国际化一直是个很重要的功能,对于一部分来说用户并不需要,但是对于一部分用户来说是必不可少的。所以在 Pro 中的自带了国际化的功能。在 V5 中我们提供了更简单的 API, 我们可以从 umi 中导出 react-intl 的所有 API。
为了照顾不想只用国际化的用户,我们提供了
i18n-remove
命令来删除所有国际化。🖥️ 模板组件
模板组件是我们去年工作的重点,早在 Pro 的第一个版本我们就提供了一系列的区块来帮助用户开发页面,在 2.0 中我们还提供了 umi ui 来管理区块。但是在实际的使用中我们发现区块上手成本高,耦合太强。并没有取得很好的反响。
在 2.0 中我们增加了 ProLayout 在社区得到了很好的反馈,ProLayout 给了我们灵感,我们是不是可以用抽象 Layout 的方式来抽象我们的常见页面。而在中后台中我们最常用的就是 CURD。在 ProCompoents 就是我们对于 CRUD 的抽象。
ProCompoents 以 valueType 为核心抽象了不同的 Field,而每个 Field 都包含了编辑和只读两种模式,这样一套抽象可以同时用于表格和表单。
所以我们可以根据 ProTable 的列配置生成查询表单。
这样 valueType 就可以生成表单和表格,并且在此之上增加了Field 的布局功能,我们可以用一套 Field 配置不用的 Layout 来生成不同的表单,同时我们还提供了可编辑表格,FormList 等低频高复杂度的组件。
对于开发者来说 ProTable 可以大大的减少代码量, 只需简单几行就可以得到一个全功能的表格。
⚡ 编译提速
随着前端工程化做的越来越深,前端的依赖越来越多,以 Pro 项目为例,一个初始化的项目包含了react, react-router,antd, ProComponents 。 一个初始化的项目启动就需要 50s。
Bundleless 就在此时应运而生。现代浏览器已经支持了 es6 的模块,那么我们就可以在项目中直接使用的 es6 ,而减少编译甚至于不编译。在首次生成 es 模块之后,获得极快的项目启动速度。umi 也提供了 Bundleless 方案 mfsu。
mfsu (Module Federation Speed Up) 是一种基于 webpack5 新特性 Module Federation 的打包提速方案。核心原理是将应用的依赖构建为一个 Module Federation 的 remote 应用,以免去应用热更新时对依赖的编译。 因此,开启 mfsu 可以大幅减少热更新所需的时间。在生产模式,也可以通过提前编译依赖,大幅提升部署效率。
我们在 config.s 中配置
mfsu:{}
和wepack5:{}
就能享受到编译性能提升的快乐。这里我们用 Pro 的基础项目整理了一个对比列表,打开 webpack5 和 mfsu 的 Pro 在启动速度和热更新速度上有压倒性的优势。
📚 项目集成模式组件文档
我们在实际的项目开发中经常需要抽象一些组件出来,这些组件在应用中广泛使用,但是文档和测试缺失, TypeScript 可能解决部分问题。但是一些设计方面的考虑需要一份文档协同起来才会更加流畅。所以 Pro 中我们内置了 dumi 的项目集成模式,在登录之后看到业务组件文档的菜单。
点击之后就可以看到 Pro 自带的业务组件文档,文档中包含了 Pro 所有内置组件的简单文档和 API .
作为一个项目开发者,集成模式还给我提供了一个良好的 debug 环境。我们的写法与正常的文档写法并无区别。
业务组件
这里列举了 Pro 中所有用到的组件,这些组件不适合作为组件库,但是在业务中却真实需要。所以我们准备了这个文档,来指导大家是否需要使用这个组件。
Footer 页脚组件
这个组件自带了一些 Pro 的配置,你一般都需要改掉它的信息。
dumi 会将 md 文件渲染为一个页面,其中的代码块会渲染成一个组件。
点击右下角还可以还可以在 CodeSandbox,快速打开 demo。想要了解更多可以查看 dumi 基础使用文档。
🏷️ OpenAPI
中后台开发中最重要的事情之一就是联调,在这期间后端一般都需要维护一份文档来告诉我们具体的 API 有什么功能,具体的字段信息有哪些,这些信息的维护成本相当高的。如果中途做了更改但是忘记更新文档就会造成信息不同步,在测试时很有可能会造成一个 bug。 Pro V5 支持使用 OpenAPI 3.0.1 的接口描述文档,这份文档可以用 Swagger 来生成,对于后端来说可能需要一点工作量,但是带来的收益是远远超出投入的。
Pro 会根据 OpenAPI 来自动生成接口和基础类,配合 TypeScript 的使用,我们可以丝滑的接入后端的数据,并且与使用
tsc
来监控后端字段改变导致的字段不对齐问题。详细的接入流程可以查看 OpenApi 的接入文档 。
🧵 如何升级到 V5
Pro 的 V4 与 V5 的底层架构是对齐,我们可以只选配自己喜欢的功能来使用新的特性。
如果需要完全切换成我们的最佳实践,可以参考升级到 Pro V5 进行操作。
❤️ 特别鸣谢
感谢所有提交错误、发起PR、回复问题、编写文档等的人!在这里特别要感谢 @kaoding 同学承担了 v5 很大一部分开发工作。 如果你在使用 Ant Design Pro 时遇到任何问题,可随时在 GitHub 提交问题。 感谢你的阅读,敬请安装、尝试。