codegen-ui

[giscafer]

背景

http://codegen.leekhub.com/codegen/ 目前获取swagger url，可能会因为后端部署接口文档时，设置了不允许跨域，这种情况，如果叫后端配合设置允许 codegen.leekhub.com 跨域的话，也可以避免了。只是每个项目都需要沟通或者要求swagger 文档允许跨域才行。

针对这个问题，我设想有以下三种解决方案。

设计

参考 umi-ui 的效果，实现 roothub-codegen 插件化引入到项目中使用。

实现

方案一

roothub-codegen 抽离成一个组件，微前端的方式集成 。目前 codegen 网站是已经集成了qiankun 微前端环境的，动态加载到了 roothub 网站，所以可以复用这里，然后项目工程只需要加入微前端环境，就可以通过 Parcels 的方式动态加载组件了。

（如果不明白，你这里需要去了解一下微前端本身支持两种方式加载应用或者组件，Application和Parcels）

方案二

去掉微前端的东西，然后抽成一个物料，托管到 materials-react，然后哪个项目需要用这个物料，只需要下载物料就可以直接使用了。

注意的问题是：

• roothub-codegen 依赖的插件要安装
• roothub-codegen 是否强依赖umi的东西了，到时集成到 非 Umi 的工程，是个问题，所以这里要评估一下移除Umi，方便后期容易兼容各种react技术栈。

方案三

前端都用 VSCode 开发，所以 VSCode 插件也是一个解决方案。版本升级都是一个插件升级，和项目解耦。

---

以上三种方案都可以解决CORS问题，个人觉得 方案三可能是最完美的。

[giscafer]

VSCode 插件开发，简单的参考：

• https://github.com/giscafer/vscode-frontend-box

复杂的参考：

• https://github.com/LeekHub/leek-fund

[giscafer]

插件已发布 https://marketplace.visualstudio.com/items?itemName=giscafer.roothub