加载webpack5邦联模块，可以自定义url地址

加载一个webpack5生成的邦联模块

npm i --save @kne/remote-loader 概述

加载一个webpack5生成的邦联模块

.ant-space-vertical { width: 100%; } .container { background: #FFF; } 示例代码 加载一个模块 加载一个模块 remoteLoader(@kne/remote-loader),reactRouter(react-router-dom),_(lodash)

const {default: Remote, loadModule, preset} = remoteLoader; const {range} = _; preset({ remotes: { default: { url: 'http://ued.dev.fatalent.cn', remote: 'ui_components' }, exceed_components: { url: 'http://ued.dev.fatalent.cn/ui_components', remote: 'exceed_components', defaultVersion: '1.0.0' } } }); loadModule('http://localhost:3001/ui_components/components-core/0.1.0:components').then((module)=>{ console.log(module); }); const BaseExample = () => { return <Remote module="Global"> <Remote module="exceed_components:Content" list={[{label: '标题', content: '内容'}, {label: '标题标题', content: '内容内容'}, { label: '标题标', content: '内容内容内容内容内容内容内容内容内容内容' }, { label: '标题标题标题', content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容' }]}/> <Remote module="exceed_components/1.0.0:TablePage" columns={[{ title: '职位名称', key: 'positionName', fixed: 'left', dataIndex: 'positionName' }, { title: '客户名称', key: 'clientName', dataIndex: 'clientName' }, { title: '工作地点', key: 'city', dataIndex: 'city' }, { title: '职位开始时间', key: 'startTime', dataIndex: 'startTime' }, { title: '职位结束时间', key: 'endTime', dataIndex: 'endTime' }]} data={{currentPage: 1, perPage: 10}} loader={({data}) => { return new Promise((resolve) => { setTimeout(() => { resolve({ pageData: range(data.perPage).map((index) => ({ id: index + (data.currentPage - 1) * data.perPage + 1, positionName: "市场运营总监" + (index + (data.currentPage - 1) * data.perPage + 1), clientName: "大众", city: "北京", startTime: "2020-01-10", endTime: "2020-02-10" })), totalCount: 48 }); }, 1000); }); }}/> </Remote>; }; render(<BaseExample/>); API

其他属性将传给远程组件

注意: 推荐使用createWithRemoteLoader，如果必须使用该高阶组件请将modules参数包裹在useMemo里面或者放在组件外边，防止由于其父组件render导致其引用地址发生变化触发不必要的render

withRemoteLoader(WrappedComponent)

withRemoteLoader的高阶函数，可以将部分参数提前传入，不必在调用withRemoteLoader(WrappedComponent) 时再传入参数

可以设置预置参数 preset({remotes,fallback,error});