# @amadeus-it-group/microfrontends 中文文档

规范地址：https://npmcn.com/package/%40amadeus-it-group/microfrontends/

版本：0\.0\.11
npm 元数据更新时间：2026-06-08T12:28:43.392Z
中文译文更新时间：2026-11-08T06:14:20.805Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40amadeus-it-group/microfrontends
原文对照：https://npmcn.com/package/%40amadeus-it-group/microfrontends/?lang=original
项目主页：https://github.com/AmadeusITGroup/microfrontends
源码仓库：https://github.com/AmadeusITGroup/microfrontends

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：231 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2025-02-18T21:18:55.804Z
- 最新版本发布：2026-06-08T12:28:43.193Z
- 近 30 天下载量：1883（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 2 个）

## 中文简介

Amadeus 微前端工具包

## 安装

```sh
npm install @amadeus-it-group/microfrontends
```

也可以使用：`pnpm add @amadeus-it-group/microfrontends`、`yarn add @amadeus-it-group/microfrontends`、`bun add @amadeus-it-group/microfrontends`

## README

# 微前端的 Amadeus 工具箱

## 通讯

用于微前端的Amadeus工具包提供了一个消息系统,允许微前端相互通信. 通讯系统基于 [频道消息API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) 并工作跨出iFrames。 也可以在同一文档中用于与作为Web组件包件的MFE交谈.

## 特征

![schema.svg](https://raw.githubusercontent.com/AmadeusITGroup/microfrontends/refs/heads/main/packages/core/docs/schema.svg)

-   已键入和版本信件交换 `MessagePeers`
-   在所有连接的微前端广播消息(前. `MF1` (给大家)
-   在两个特定的微前端之间发送信件(ex. `MF4` 改为 `MF3`(中文(简体) )
-   生命周期信息(前). `MF5` 断开, `MF3` 已连接)
-   发送前和接收时信件验证

## 常见用例

-   [创建信件端点](https://npmcn.com/package/%40amadeus-it-group/microfrontends/#readme-creating-a-message-peer)
-   [连接到另一个端口](https://npmcn.com/package/%40amadeus-it-group/microfrontends/#readme-connecting-to-another-peer)
-   [监听连接](https://npmcn.com/package/%40amadeus-it-group/microfrontends/#readme-listening-for-connections)
-   [声明信件类型](https://npmcn.com/package/%40amadeus-it-group/microfrontends/#readme-declaring-message-types)
-   [发送和接收信息](https://npmcn.com/package/%40amadeus-it-group/microfrontends/#readme-sending-and-receiving-messages)
-   [服务信息](https://npmcn.com/package/%40amadeus-it-group/microfrontends/#readme-service-messages)
-   [日志](https://npmcn.com/package/%40amadeus-it-group/microfrontends/#readme-logging)
-   [关于网络的信息](https://npmcn.com/package/%40amadeus-it-group/microfrontends/#readme-information-about-the-network)

### 创建信件端点

您可以创建多个消息端点, 并且以任何避免循环的方式将它们连接在一起 。 您在创建对等点时需要提供一些选项 。 仅 `id` 技术要求.

```ts
import { Message, MessagePeer } from '@amadeus-it-group/microfrontends';

// 'one' is unique identifier for this peer in the network
const peer = new MessagePeer({ id: 'one' });
```

### 连接到另一个端口

端点可以等待来自另一个端点的连接通过 `.listen()` 或通过 `.connect()`。 。 。 .

```ts
import { MessagePeer } from '@amadeus-it-group/microfrontends';

// Create two peers.
// First peer waits for any incoming connection
const one = new MessagePeer({ id: 'one' });
one.listen();

// Second peer connects to the first one
const two = new MessagePeer({ id: 'two' });
const disconnect = two.connect('one');

// if connection crosses iFrames, you might need to provide
// expected window and origin for `connect` and `listen`  methods
two.connect('one', {
  window: oneWindow,
  origin: 'https://example.com',
});

// Disconnecting
disconnect(); // 'two' disconnects from 'one'
one.disconnect('two'); // 'one' disconnects from 'two'
one.disconnect(); // 'one' disconnects from all connected peers
```

### 监听连接

一个对等者可以决定要接受哪个连接 。 最简单的用法是听所有连接而无需过滤 :

```ts
const stop = peer.listen(); // start listening
stop(); // stop listening; can restart anytime
```

更高级的用法允许您根据对等的ID,源窗口,出处或自定义逻辑来过滤接入的连接.

```ts
// 1. Using simple peer ids
peer.listen('two');
peer.listen(['two', 'three']);

// 2. Using matching objects
// ex. from peer 'two' from a specific iframe of the expected origin
peer.listen({
  id: 'two',
  source: iframe.contentWindow,
  origin: 'https://example.com',
});

// ex. any connection from this particular iframe
peer.listen({
  source: iframe.contentWindow,
});

// ex. any connection from this origin
peer.listen({
  origin: 'https://example.com',
});

// 3. Using a combination of ids and objects
peer.listen(['one', 'two', { id: 'three', origin: 'https://example.com' }]);

// 4. Using a custom function
// ex. filter connections based on the handshake message and where it comes from
peer.listen((message, source, origin) => {
  return true; // you decide whether to accept the connection
});
```

### 声明信件类型

这是可选的,但允许在发信和收信时进行类型检查.

```ts
import { Message } from '@amadeus-it-group/microfrontends';

interface HelloMessage_1_0 extends Message {
  type: 'hello';
  version: '1.0';
  greeting: string;
}

interface HelloMessage_2_0 extends Message {
  type: 'hello';
  version: '2.0';
  greetings: string[];
}

export type MyMessage = HelloMessage_1_0 | HelloMessage_2_0;
```

### 发送和接收信息

```ts
import { MessagePeer } from '@amadeus-it-group/microfrontends';

// Receiving messages
const one = new MessagePeer<MyMessage>({ id: 'one' });

// An observable-like interface consuming messages
one.messages.subscribe(({ payload }: MyMessage) => {
  if (payload.type === 'hello') {
    switch (payload.version) {
      case '1.0':
        console.log(payload.greeting); // string
        break;
      case '2.0':
        console.log(payload.greetings); // string[]
        break;
    }
  }
});

// Broadcast a message. Message will be type checked.
two.send({
  type: 'hello',
  version: '1.0',
  greeting: 'Hello, world!',
});

// Send a message to a specific peer. Other peers will not receive it.
two.send(
  {
    type: 'hello',
    version: '2.0',
    greetings: ['Hello', 'world!'],
  },
  {
    to: 'one',
  },
);
```

### 服务信息

有一些生命周期信息(`ServiceMessage`)由图书馆自动发送。 你可以听他们使用 `.serviceMessages` 溪流,以避免在 `.message` 流线.

```ts
import { MessagePeer, ServiceMessage } from '@amadeus-it-group/microfrontends';

const peer = new MessagePeer({ id: 'one' });

peer.serviceMessages.subscribe(({ payload }: ServiceMessage) => {
  switch (payload.type) {
    case 'handshake':
      // instance of `HandshakeMessage`
      break;
    case 'connect':
      // instance of `ConnectMessage`
      break;
    case 'disconnect':
      // instance of `DisconnectMessage`
      break;
    case 'error':
      // instance of `ErrorMessage`
      break;
  }
});
```

### 日志

可以通过 : `enableLogging()` 方法。 它会记录所有发送和接收的邮件以进行调试.

```ts
import { enableLogging } from '@amadeus-it-group/microfrontends';

enableLogging();
```

### 关于网络的信息

```ts
// List all known peers and their accepted messages
one.knownPeers; // a map of known peers and messages they accept
one.knownPeers.get('two'); // a list of message types peer 'two' accepts
```

## 常见问题

### @amadeus-it-group/microfrontends 是什么？

Amadeus 微前端工具包

### 如何安装 @amadeus-it-group/microfrontends？

在项目目录运行 npm install @amadeus-it-group/microfrontends，或使用 pnpm add / yarn add / bun add。

### @amadeus-it-group/microfrontends 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @amadeus-it-group/microfrontends 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @amadeus-it-group/microfrontends 可以商用吗？

@amadeus-it-group/microfrontends 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @amadeus-it-group/microfrontends 的下载量有多少？

根据 npm 官方下载统计，@amadeus-it-group/microfrontends 在 2026/10/06 – 2026/11/04 这 30 天内被下载 1,883 次，日均约 63 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @amadeus-it-group/microfrontends 还在维护吗？

最新版本 0\.0\.11 发布于 2026/06/08（4 个月前）；至今共发布 11 个版本，其中过去 12 个月发布了 2 个；首次发布于 2025/02/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。