chore: improve module-feduration

web-infra-dev · Sep 23, 2024 · 6f11818 · 6f11818
1 parent 5fb6cdf
commit 6f11818
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git a/...document/main-doc/docs/en/guides/topic-detail/module-federation/application.mdx b/...document/main-doc/docs/en/guides/topic-detail/module-federation/application.mdx
@@ -48,7 +48,7 @@ export default createModuleFederationConfig({
   name: 'remote',
   filename: 'remoteEntry.js',
   exposes: {
-    './remote': './src/export-App.tsx',
+    './app': './src/export-App.tsx',
   },
   shared: {
     react: { singleton: true },
@@ -85,7 +85,7 @@ const ErrorBoundary = (info?: { error: { message: string } }) => {
 };
 const Loading = <div>loading...</div>;
 const RemoteApp = createRemoteComponent({
-  loader: () => loadRemote('remote/remote'),
+  loader: () => loadRemote('remote/app'),
   fallback: ErrorBoundary,
   loading: Loading,
 });

diff --git a/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/usage.mdx b/packages/document/main-doc/docs/en/guides/topic-detail/module-federation/usage.mdx
@@ -143,6 +143,24 @@ To ensure the types take effect, add a new `path` in `tsconfig.json`:
 }
 ```
 
+:::tip
+In the consumer, we reference the remote module using `remote/Button`. Here's a brief explanation of what this path specifically represents. You can abstract it as `[remoteAlias]/[remoteExpose]`.
+
+The first part, `remoteAlias`, is the alias of the producer in the consumer. It is the `key` configured in the `remotes` field of the consumer's `module-federation.config.ts`:
+
+```ts
+{
+  remotes: {
+    [remoteAlias]: '[remoteModuleName]@[URL_ADDRESS]',
+  }
+}
+```
+
+Here, we also abstract the remote address as `[remoteModuleName]@[URL_ADDRESS]`. The part before `@` must correspond to the module name of the producer.
+
+The second part, `remoteExpose`, is the `key` configured in the `exposes` field of the producer's `module-federation.config.ts`.
+:::
+
 ## Start the Applications
 
 Now, both the producer and consumer applications are set up. You can run `modern dev` locally to start both applications.

diff --git a/...document/main-doc/docs/zh/guides/topic-detail/module-federation/application.mdx b/...document/main-doc/docs/zh/guides/topic-detail/module-federation/application.mdx
@@ -48,7 +48,7 @@ export default createModuleFederationConfig({
   name: 'remote',
   filename: 'remoteEntry.js',
   exposes: {
-    './remote': './src/export-App.tsx',
+    './app': './src/export-App.tsx',
   },
   shared: {
     react: { singleton: true },
@@ -85,7 +85,7 @@ const ErrorBoundary = (info?: { error: { message: string } }) => {
 };
 const Loading = <div>loading...</div>;
 const RemoteApp = createRemoteComponent({
-  loader: () => loadRemote('remote/remote'),
+  loader: () => loadRemote('remote/app'),
   fallback: ErrorBoundary,
   loading: Loading,
 });

diff --git a/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/usage.mdx b/packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/usage.mdx
@@ -142,8 +142,26 @@ export default Index;
     }
   }
 }
+``` 
+
+:::tip
+在消费者中，我们通过 `remote/Button` 来引用远程模块。这里简单介绍下这个路径具体代表了什么，可以先将它抽象成 `[remoteAlias]/[remoteExpose]`。
+
+第一段 `remoteAlias` 是生产者在消费者中的别名，它是消费者 `module-federation.config.ts` 中配置的 `remotes` 字段的 `key`：
+
+```ts
+{
+  remotes: {
+    [remoteAlias]: '[remoteModuleName]@[URL_ADDRESS]',
+  }
+}
 ```
 
+这里我们也将远程地址抽象为 `[remoteModuleName]@[URL_ADDRESS]`，`@` 前的部分必须对应生产者的模块名。
+
+第二段 `remoteExpose` 是生产者在 `module-federation.config.ts` 中配置的 `exposes` 字段的 `key`。
+:::
+
 ## 启动应用
 
 现在，生产者应用和消费者应用都已经搭建完毕，我们可以在本地运行 `modern dev` 启动两个应用。