使用hel-micro制作远程antd,tdesign-react

hel-micro,modulefederationsdk,build-free,hotupdate,toolchain-independentmicro-modulesolution,欢迎关注和了解hel的使用-micro在制作远程react图形组件库micro模块联合技术sdk解决方案是基于react组件模板创建远程antd库（hel-antd）和远程tdesign-react库（hel-tdesign-react）。hel-antd和hel-tdesign-react的制作过程是完全一样的，唯一的区别就是安装的库不同。可以参考这篇文章制作其他优秀的react图形组件库作为对应的远程库。以下步骤用于制作hel-antd-based。传统的react图形组件库导入方式在多个项目升级时非常麻烦：hel-micro升级为远程库后，被其他项目使用时，实际运行逻辑不参与项目打包，用户可以实现无感知动态升级（顺便说一句，也减少了项目的包大小，提高了编译速度），以antd为例，如果你有5个项目使用antd2.您需要为所有5个项目安装最新的antd版本并重新部署它们。如果是引用的hel-antd，只需要在2.21版本的基础上重新发布hel-antd，用户就可以运行最新版的antd了。基于代理对象技术，用户可以像使用本地antd一样使用远程antd和远程tdesign-react，参见在线示例：使用hel-antd，使用hel-tdesign-react克隆react模板库clonethereacttemplatelibrary，并保存为hel-antd目录，接下来我们将修改gitclonehttps://github.com/hel-eco/hel-tpl-remote-react-comp-ts.githel-antd修改模块根据该目录下的文件将package.json中模块的名称改为hel-antd"name":"hel-tpl-remote-react-comps-ts","appGroupName":"hel-tpl-remote-react-comps-ts","name":"hel-antd","appGroupName":"hel-antd"，修改项目中src/configs/subApp.ts的LIB_NAME为hel-antd（如果不修改，构建时会报模块名称不一致错误)exportconstLIB_NAME='hel-tpl-remote-react-comps-ts';exportconstLIB_NAME='hel-antd';>可以修改成你想要的名字，这里只是以安装antd为例这里我们是基于的4.23.4版本antd构建远程antd库npmiantd@4.23.4导出antd模块导出antd模块主要包括2部分，导出运行时代码用于webpack打包，方便hel-micro动态拉取构建好的运行时代码导出proxy对象用于rollup打包，方便用户安装远程模块类型文件，使用import在文件头静态导入远程模块。运行时导出代码的时候，我们先把我们要暴露的远程组件导出到src/components下-importHelloRemoteReactCompfrom'./HelloRemoteReactComp';-export{-HelloRemoteReactComp,-}+import*asantdfrom'antd';+导出{默认为TestExport}来自'./TestExport';+exportdefaultantd;请注意，这里额外导出了一个TestExport组件，以演示您可以扩展原始antd库并添加您自己的新组件functionTestExport(){returnTestExportComponent};TestExport.displayName='TestExport';导出默认测试导出；然后在src/entrance/libProperties.ts中合并导出模块（这个合并逻辑也可以在src/components中处理），同时暴露导出的模块类型对象——importcompsfrom'components';——exporttypeLibProperties=typeofcomps；-exportdefaultcomps；+importantd,{TestExport}from'components';+consttoExport={...antd,TestExport};+exporttypeLibProperties=typeoftoExport;+exportdefaulttoExport;proxyobjectexportsrc/entrance/libTypes.ts文件内容表示导出代理对象，对象实际内容由用户hel-micro模块的preFetchLib函数填充。如果不修改以下行，则不会Problemimporttype{LibProperties}from'./libProperties';import{exposeLib}from'hel-lib-proxy';import{LIB_NAME}from'configs/subApp';exportconstlib=exposeLib(LIB_NAME);导出类型Lib=LibProperties；导出默认库；但是用户只能使用默认的导出语法，不能直接解构文件头//okimpor来自'hel-antd'的tantd；const{Button}=antd;//errorimport{Button}from'hel-antd';为了支持文件头的直接解构，我们需要调整src/entrance/libTypes.ts文件的内容，分别导出antd的各个组件//下面单次导出支持import{Button}from'hel-蚂蚁';直接解构的语法+exportconstAffix=lib.Affix;+exportconstAlert=lib.Alert;importstylefiles在src/index.ts文件中导入antd样式文件，因为hel-antd支持使用css变量自定义主题，所以导入调整后的样式文件（将原css文件的keycolor替换为css变量）从'hel-lib-proxy'导入{libReady，isMasterApp};从'./configs/subApp'导入{LIB_NAME};+导入'./styles/theme.css';+导入'./styles/antd-style.css';如果不需要这个功能，可以直接导入原始样式文件import{libReady,isMasterApp}from'hel-lib-proxy';import{LIB_NAME}from'./configs/subApp';+import'antd/dist/antd.css'打包发布修改package.json中版本号为1.0.0，运行build命令打包npmrunbuild运行publish命令发布npmpublishuseremoteantduseremoteantd包括预加载远程模块和导入代理模块第一步是预加载远程模块。使用npm命令根据代理模块npmihel-antd入口文件向后移动，绑定reactpublic对象，预加载hel-antd，让远程模块实际运行的代码通过hel-填充到代理模块中microimport{preFetchLib,bindReactRuntime}from"hel-micro";从“react”导入React;从“react-dom”导入ReactDOM;从“react-is”导入ReactIs;bindReactRuntime({React,ReactDOM,ReactIs});asyncfunctionmain(){//预加载远程模块,比如hel-antdawaitpreFetchLib("hel-antd",{enableDiskCache:true});等待导入("./loadApp");//你原来的入口文件}main().catch(console.error);导入代理模块接下来，你可以导入远程模块，并在项目中除入口文件外的任何文件中使用它们。import{Button}from"hel-antd";//renderantdButtonremoteantdbuttonnewwindowaccess在线示例：使用hel-antd，使用hel-tdesign-react自定义cdnhel-micro默认使用unpkg文件cdn服务。如果你有自建的unpkg私服，可以调整打包策略，注入自己的cdn服务前缀。只需要修改config/subApp.js-constsubApp=helDevUtils.createReactSubApp(pkg,{npmCdnType:'unpkg'});+constsubApp=helDevUtils.createReactSubApp(pkg,{npmCdnType:'unpkg',homePage:'http//my-unpkg.com'});自建npm+unpkg私服可以参考issue19的结论使用hel-micro，可以以极低的成本传播模块联邦技术。优点见上一篇hel-micro模块联邦的新革命，欢迎了解使用^_^_附：我的其他开源作品的朋友（欢迎关注了解）：concent，一个react数据流解决方案limu自带依赖收集和设置功能，比immer更高效的js不可变操作库