@ appshell/ 反应
与Webpack Module Federation和Appshell一起建造微前端的回放功用.
工作实例可见于此 这里。 。 。 .
开始
开始,你需要安装 @appshell/react数字 :
npm install @appshell/react
或者说
yarn add @appshell/react
或者说
pnpm add @appshell/react
远程槽
遥控器被安装的地方。 位点可以解决远程密钥的构成,
把它装入模块联盟,制作 fallback 而那在逃亡中
显示负载失败,而不是将页与它相接.
import { RemoteSlot } from '@appshell/react';
<App>
<RemoteSlot remote="PingModule/Ping" fallback={<Spinner />} />
<RemoteSlot remote="PongModule/Pong" fallback={<Spinner />} />
</App>
任何其他道具都通过挂载遥控器.
登记册将构成纳入它所服务的文件,因此 不需要自己的配置.
使用远程
进入周围的远程支援 RemoteSlot. 更喜欢这个
将自己输入到清单中.
import { useRemote } from '@appshell/react';
const MyComponent = () => {
const remote = useRemote();
...
}
远程提供
给远程小树提供补给. RemoteSlot 把它装入其中
已经,所以你很少自己构建它 ——在测试中达到它,它是什么
制造 useRemote 还给我.
import { RemoteProvider } from '@appshell/react';
render(
<RemoteProvider remote={manifest.remotes['PingModule/Ping']}>
<Ping />
</RemoteProvider>,
);
json 资源
在缓存兼容资源中环绕抓取, 这样组件可以在 JSON 期间读取 转换而不是通过它来连接装载状态.
import { jsonResource } from '@appshell/react';
const settings = jsonResource<Settings>('/api/settings');
const Panel = () => <pre>{settings.read().theme}</pre>;