指南
API
指南
API

模块链接

我们假设有三个服务，分别是 ssr-base、ssr-module-auth、ssr-main，其中

  • ssr-base 基础服务，负责第三方依赖的管理，以及提供基础的业务组件、工具函数。

  • ssr-module-auth 业务服务，按照业务模块来拆分服务，这里是负责用户认证相关，包含登录、注册、找回密码、验证码相关，最终对外会导出一个路由的配置文件。

  • ssr-main 聚合服务，将不同业务服务导出的路由配置注册进路由总线中，实现应用程序的聚合。

基本概念

Remote

  • 定义：提供远程模块供其他应用使用的应用。
  • 功能：导出自己的模块，以便其他应用可以动态加载和运行。
  • 特点：独立、灵活，可独立更新和扩展，共享依赖以优化资源加载。

Host

  • 定义：加载并运行远程模块的应用，通常作为微前端架构的宿主。
  • 功能：动态加载 Remote 应用提供的模块，并在需要的地方导入和使用。
  • 特点：整合能力强，能将多个 Remote 应用组合成完整前端应用，提供扩展点和钩子函数。
TIP

每一个服务，既可以是 Host，也可以是 Remote。下面将会以 ssr-base 和 ssr-main 作为例子，分别扮演 Remote 和 Host，你将会了解到它是如何工作的。

无类型导出

在执行 tsc --declaration --emitDeclarationOnly --outDir dist/src 命令时，由于找不到 npm/axios.ts 这个文件，所以不会生成类型文件。

Remote

直接将 axios 模块导出。

ssr-base/src/entry.node.ts
1import type { GezOptions } from '@gez/core';
2
3export default {
4    modules: {
5        exports: ['npm:axios']
6    },
7} satisfies GezOptions;

Host

ssr-main 此时作为 Host，需要将 axios 链接到 ssr-base/npm/axios，并且需要在项目安装 axios 模块来获得类型提示。

ssr-main/src/entry.node.ts
1import type { GezOptions } from '@gez/core';
2
3export default {
4    modules: {
5        imports: {
6            'ssr-base': 'root:../ssr-base/dist'
7        },
8        externals: {
9            axios: 'ssr-base/npm/axios'
10        }
11    },
12} satisfies GezOptions;

源码：

1import axios from 'axios';

将会被替换成：

1import axios from 'ssr-base/npm/axios';

有类型导出

在执行 tsc --declaration --emitDeclarationOnly --outDir dist/src 命令时，由于存在 src/axios.ts 这个文件，就会生成相关的类型文件。

Remote

创建文件，并导出 axios。

ssr-base/src/axios.ts
1export * from 'axios';

导出 axios 软件包。

ssr-base/src/entry.node.ts
1import type { GezOptions } from '@gez/core';
2
3export default {
4    modules: {
5        exports: ['root:src/axios.ts']
6    },
7} satisfies GezOptions;

Host

ssr-main 此时作为 Host，需要导入 ssr-base 服务。

ssr-main/src/entry.node.ts
1import type { GezOptions } from '@gez/core';
2
3export default {
4    modules: {
5        imports: {
6            'ssr-base': 'root:../ssr-base/dist'
7        }
8    },
9} satisfies GezOptions;

此时，你在业务代码中将会获得类型提示。

ssr-main/src/app.ts
1import axios from 'ssr-base/src/axios';
TIP

如果要考虑到老系统需要迁移，你还是可以选择将 axios 替换成 ssr-base/src/axios，并且需要安装 axios 模块到当前项目下才能获得类型提示。

ssr-main/src/entry.node.ts
1import type { GezOptions } from '@gez/core';
2
3export default {
4    modules: {
5        externals: {
6            axios: 'ssr-base/src/axios'
7        }
8    },
9} satisfies GezOptions;

软件包发布

packs.enable 配置为 true 时，在编译完成后，会将 dist 目录进行归档，在根目录生成 dist.tgz。

1import type { GezOptions } from '@gez/core';
2
3export default {
4    packs: {
5        enable: true
6    }
7} satisfies GezOptions;
WARNING

未完待续！