@ appshell/ 载入器
用Appshell和Webpack Module Front制造的微前端动态加载Appshell组件.
工作实例可见于此 这里。 。 。 .
开始
开始,你需要安装 @appshell/loader数字 :
npm install @appshell/loader
或者说
yarn add @appshell/loader
或者说
pnpm add @appshell/loader
默认导出为装货厂. 它返回解析远程的同步函数 键并加载后面的组件。 它不需要配置- 组成被读取 从登记处所服务的文件中删除.
import componentLoader from '@appshell/loader';
const load = componentLoader();
const Component = load<MyComponent>('MyModule/MyComponent');
render(<Component />);
成分从何而来?
登记册将它纳入它所服务的文件中,作为:
window.__appshell_config__。 。 。 .
如何解决远程
装货者走一连串的解决者,使用第一个答案:
| 解析器 | 来源 | 当它回答 |
|---|---|---|
inlineResolver | window.__appshell_config__ | 登记册为网页服务,并列出了组成情况。 没有网络通话. |
registryResolver | GET /v1/applications/:id/remotes/:key | 遥控器在此页面服务后被激活. |
一个包裹的 vars 交付到 @appshell/runtime 紧接之前的存储
它的遥控器已经装入, 因此它们已经在软件包的模块评价前就已经到位了 。 他们
已与申请的覆写合并,因为登记处这样做
合并服务器侧-浏览器不应用任何功能. 包裹读取他们 getVars()
从 @appshell/runtime/vars。 。 。 .
可以完全绕过链条,这主要用于测试和嵌入器:
const load = componentLoader({ resolver: myResolver });
你有特定框架装载器吗?
见 @ appshell/ 反应 (单位:千美元)
React加载器.