hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块计划 ，欢送关注与理解
制作近程react图形组件库
应用hel-micro模块联邦技术sdk化计划，基于react组件模板制作近程antd库（hel-antd）、近程tdesign-react库（hel-tdesign-react）。
hel-antd、hel-tdesign-react 两者制作过程齐全一样，区别仅是装置的库不同，你能够参考此文将其余优良的
react图形组件库制作为对应的近程库，以下步骤以制作 hel-antd 为主。
传统的react图形组件库导入形式，多我的项目降级时很麻烦：
基于hel-micro晋升为近程库后，被其余我的项目应用时，理论运行逻辑不参加我的项目打包，能够做到应用方无感知动静降级（顺带也升高了我的项目打包体积，并进步编译速度），以antd为例，如果你有5个我的项目用到了antd2.20，某一天暴露出2.20存在了一个重大bug，官网降级到了2.21版本，这时候你须要把你的5个我的项目全副装置一下最新的antd版本并重新部署一遍，而如果是援用的hel-antd，就只须要基于2.21版本从新公布一下hel-antd即可，所用应用方就能够运行最新版本的antd了。
基于代理对象技术应用方能够像应用本地antd一样应用近程antd、近程tdesign-react，见在线示例：应用hel-antd
、应用hel-tdesign-react
克隆react模板库
克隆react模板库，保留为hel-antd目录，接下来的步骤里，咱们都将基于此目录下的文件革新
git clone https://github.com/hel-eco/hel-tpl-remote-react-comp-ts.git hel-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（如不批改，构建时会报模块名不统一谬误） - export const LIB_NAME = ‘hel-tpl-remote-react-comps-ts’;
-
export const LIB_NAME = ‘hel-antd’;
> 可依据须要批改为本人想要的命名，此处仅为示例
装置antd
此处咱们基于4.23.4版本的antd构建近程antd库
npm i [email protected]导出antd模块
导出antd模块次要蕴含2个局部，
- 导出运行时代码供
webpack打包用，不便hel-micro能够动静拉取已构建的运行代码 - 导出代理对象供
rollup打包用，方便使用方能够装置近程模块类型文件，并在文件头应用import动态导入近程模块
运行时代码导出
咱们先在src/components下导出咱们想要裸露的近程组件
- import HelloRemoteReactComp from './HelloRemoteReactComp';
- export {
- HelloRemoteReactComp,
- }
+ import * as antd from 'antd';
+ export { default as TestExport } from './TestExport';
+ export default antd;留神此处额定导出了一个TestExport组件，用于示范能够扩大原始antd库退出本人的新组件
function TestExport() {
return <span>TestExport Component</span>
};
TestExport.displayName = 'TestExport';
export default TestExport;而后在src/entrance/libProperties.ts里合并导出模块（此合并逻辑也可在src/components外面解决），并同时裸露推导出的模块类型对象
- import comps from 'components';
- export type LibProperties = typeof comps;
- export default comps;
+ import antd, { TestExport } from 'components';
+ const toExport = { ...antd, TestExport };
+ export type LibProperties = typeof toExport;
+ export default toExport;代理对象导出
src/entrance/libTypes.ts文件内容示意导出代理对象，对象的理论内容由应用方hel-micro模块的preFetchLib函数填充，如上面的一行也不批改也是没问题的
import type { LibProperties } from './libProperties';
import { exposeLib } from 'hel-lib-proxy';
import { LIB_NAME } from 'configs/subApp';
export const lib = exposeLib<LibProperties>(LIB_NAME);
export type Lib = LibProperties;
export default lib;但应用方只能应用default导出语法，而不能在文件头间接解构
// ok
import antd from 'hel-antd';
const { Button } = antd;
// error
import { Button } from 'hel-antd';为了反对文件头间接解构的写法，咱们须要调整src/entrance/libTypes.ts文件内容，独自导出antd的各个组件
// 以下单个导出，反对 import { Button } from 'hel-antd'; 间接解构的语法
+ export const Affix = lib.Affix;
+ export const Alert = lib.Alert;引入款式文件
在src/index.ts文件里导入antd的款式文件，因 hel-antd反对应用css变量自定义主题，所以导入的时调整后的款式文件（将原始css文件的要害色彩替换为css变量）
import { libReady, isMasterApp } from 'hel-lib-proxy';
import { LIB_NAME } from './configs/subApp';
+ import './styles/theme.css';
+ import './styles/antd-style.css';如不须要此性能，间接导入原始款式文件即可
import { libReady, isMasterApp } from 'hel-lib-proxy';
import { LIB_NAME } from './configs/subApp';
+ import 'antd/dist/antd.css'打包与公布
批改package.json里的version版本号为1.0.0，运行build命令打包
npm run build运行publish命令公布
npm publish应用近程antd
应用近程antd包含预加载近程模块和导入代理模块两个步骤
预加载近程模块
应用npm命令依照代理模块
npm i hel-antd入口文件后移，绑定react公共对象，预加载hel-antd，让近程模块的理论运行代码通过hel-micro填充到代理模块里
import { preFetchLib, bindReactRuntime } from "hel-micro";
import React from "react";
import ReactDOM from "react-dom";
import ReactIs from "react-is";
bindReactRuntime({ React, ReactDOM, ReactIs });
async function main() {
// 预加载近程模块 ，例如 hel-antd
await preFetchLib("hel-antd", { enableDiskCache: true });
await import("./loadApp"); // 你的原始入口文件
}
main().catch(console.error);导入代理模块
接下来你能够在我的项目里除入口文件之外的其余任意文件想导入本地模块一样导入近程模块并应用了。
import { Button } from "hel-antd";
// render antd Button
<Button danger>remote antd button</Button>新窗口拜访在线示例：应用hel-antd
、应用hel-tdesign-react
自定义cdn
hel-micro默认采纳的是unpkg文件cdn服务，如有自建的unpkg私服，可调整打包策略注入本人的cdn服务前缀，只须要批改config/subApp.js即可
- const subApp = helDevUtils.createReactSubApp(pkg, { npmCdnType: 'unpkg' });
+ const subApp = helDevUtils.createReactSubApp(pkg, { npmCdnType: 'unpkg', homePage: 'http://my-unpkg.com' });自建npm+unpkg私服可参考issue 19
结语
应用hel-micro，能够用极低的代价来铺开模块联邦技术，劣势见往期文章hel-micro 模块联邦新反动，欢送理解与应用^_^
_
附：我的其余开源作品友链（欢送关注与理解）：
concent，一个自带依赖收集、提供setup个性的react数据流计划
limu，一个比immer更高效的js不可变操作库
发表回复