# @boomi/exosphere 中文文档

规范地址：https://npmcn.com/package/%40boomi/exosphere/

版本：8\.1\.4
npm 元数据更新时间：2026-10-22T13:17:06.817Z
中文译文更新时间：2026-11-08T11:17:51.528Z
软件包许可：BSD-3-Clause

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

原始 npm 页面：https://www.npmjs.com/package/%40boomi/exosphere
原文对照：https://npmcn.com/package/%40boomi/exosphere/?lang=original
项目主页：https://exosphere.boomi.com/

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

- 包体积（解压后）：57.3 MB，637 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：19 个
- 首次发布：2022-08-11T20:13:35.951Z
- 最新版本发布：2026-10-22T13:17:06.309Z
- 近 30 天下载量：6316（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：191（近 12 个月 30 个）

## 中文简介

Web 组件库

## 安装

```sh
npm install @boomi/exosphere
```

也可以使用：`pnpm add @boomi/exosphere`、`yarn add @boomi/exosphere`、`bun add @boomi/exosphere`

## README

# 外层

Web 组件库

-   所有框架的工作
-   一等反应支持 QQ
-   启用了 QQ 的黑暗主题
-   与Vite 绑在一起

## 使用量

### Web 组件

#### 当地安装

添加样式和 Javascript 文件到 `<head>` hTML 标记区域

```
<link rel="stylesheet" href="/dist/styles.css">
<script type="module" src="/dist/index.mjs"></script>
```

#### 使用量

```
// index.html

<ex-button type="primary" flavor="branded">Hello Web Components!</ex-button>
```

### 反应

Web 组件用反应包装

#### 安装

```
npm i @boomi/exosphere --save
```

#### 配置

在全局文件中导入 CSS 如 `index.(js|ts|tsx)` 或者说 `App.(js|ts|tsx)`

```
import "@boomi/exosphere/dist/styles.css";
```

对于 Jest, 您需要在其包件中添加以下条目

```
// package.json

"jest" : {
      "transformIgnorePatterns": [ "<roodDir>/node_modules/(?!@boomi/exosphere/)" ],
      "moduleNameMapper": {
            "^@boomi/exosphere": "<rootDir>/node_modules/@boomi/exosphere/dist/react/index.mjs"
      }
}
```

#### 使用量

开始使用外层反应组件. 示例

```
// src/App.(js|ts|tsx)

import {ExButton} from '@boomi/exosphere';

function App() {
  return (
    <div>
        <ExButton flavor="base" type="primary"> Hello from ExoSphere!</ExButton>
    </div>
  );
}

export default App;
```

### 阴道

#### 安装

```
npm i @boomi/exosphere --save
```

#### 配置

```
// src/main.js

import "@boomi/exosphere/dist/styles.css";
import "@boomi/exosphere";
```

#### 使用量

```
// src/App.vue
<template>
    <ex-button type="primary" flavor="branded" @click="doSomething">Hello Vue!<ex-button>
</template>
```

### 角质

#### 安装

```
npm i @boomi/exosphere --save
```

#### 配置

```
// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
```

导入外层样式( It)

```
// app.component.ts

import "@boomi/exosphere/dist/styles.css";
import "@boomi/exosphere";
```

#### 使用量

```
// app.component.html

<div>
  <ex-button (click)="doSomething()" type="primary" flavor="branded">Hello Angular!</ex-button>
</div>
```

## 所需资源

节点 v16+

## 安装

安装所有依赖关系

```bash
npm install
```

## 预启动( 只一次)

输入代码时添加 git 钩子以运行单位测试

```
npm run prestart
```

## 故事书

在http://localhost:6006上以监视模式运行故事书,并用热模块替换来进行开发. 代码的更改可以立即被预览.

```bash
npm run storybook
```

## 构建

创建 Javascript 和样式捆绑 。 另外,将网络组件包成反应使用

```bash
npm run build
```

## 特性测试

### 先决条件

-   基特 CLI
-   节点
-   Bitbucket 访问出层回放
-   外层回波本地克隆

本地构建并托管故事书构建文件. 目前,默认分支设置为 `develop`。 。 。 .

```
npm run build-storybook:host
```

使用情况 `--branch` 旗下用于构建和托管相应的分支,即:.

```
npm run build-storybook:host --branch=<FEATURE_BRANCH>

Examples:
npm run build-storybook:host --branch=UU-127
npm run build-storybook:host --branch=develop
```

注意: 确保特性分支被开发者推向了比特bucket源头.

## 单位测试

运行单元测试

```
npm test
```

## 覆盖范围

在覆盖/ 文件夹中生成代码封面报告

```
npm run coverage
```

## 脚手架

生成新组件的脚手架

```
npm run create-component
```

您需要在src/组件下导出索引.ts文件中新建的组件.

## MCP 服务器

Exosphere 船用 MCP(模式上下文协议)服务器,提供AI助手(Claude Code, Cursor等)关于所有组件,图标,道具,事件,和使用指南的结构化知识.

### 消费者设置

MCP服务器被捆绑在包内. 当你跑的时候 `npm install @boomi/exosphere`后置脚本自动写入 `.mcp.json` 转到您的工程根 :

```json
{
  "mcpServers": {
    "exosphere": {
      "command": "node",
      "args": ["./node_modules/@boomi/exosphere/dist/mcp-server/index.js"]
    }
  }
}
```

要禁用此行为, 设置 `EXOSPHERE_SKIP_MCP=1`。使用其中之一:

```bash
# Shell profile (~/.zshrc, ~/.bashrc)
export EXOSPHERE_SKIP_MCP=1
```

```ini
# .npmrc (project or global)
exosphere_skip_mcp=1
```

安装后重新启动 Claude 代码(或您的 MCP 兼容 IDE) 。 服务器曝光了10个工具: `list_components`, (中文(简体) ), `get_component_details`, (中文(简体) ), `get_code_examples`, (中文(简体) ), `search_components`, (中文(简体) ), `get_usage_guidelines`, (中文(简体) ), `get_design_tokens`, (中文(简体) ), `search_icons`, (中文(简体) ), `list_icon_categories`, (中文(简体) ), `get_component_summary`,以及 `list_tools`。 。 。 .

### 更新 MCP 服务器( 外部层开发者)

MCP 服务器从一个预建的登记册读取(`mcp-server/data/component-registry.json`从每个组件生成) `knowledge.md`, TypeScript source, Storybook stories, React Crapper, and styles (英语). , TypeScript source, Story Book stories, React Crapper, and styles (英语). 互联网档案馆的存檔,存档日期2014-07-02.,.

**当你更新一个 `knowledge.md` 文件**,重建登记册并手动捆绑:

```bash
npm run mcp:build
```

这有三步顺序:

1.  `mcp:generate-registry` - 重新确认所有 `knowledge.md`, (中文(简体) ), `.ts`, (中文(简体) ), `.stories.ts`,反应包装,以及 `.styles.ts` 文件 – 写 `mcp-server/data/component-registry.json` 财务报告和审定财务报表 `icon-registry.json`
2.  `mcp:bundle` ——将 MCP 服务器 + 所有依赖性捆绑为一个自成一体的 `dist/mcp-server/index.js`
3.  `mcp:copy-data` - 将JSON文件复制到 `dist/mcp-server/data/`

MCP建设也被纳入了全生产建设(`npm run build`),因此登记册总是在已公布的软件包中更新.

**在登记册中添加一个新的组成部分:**

不需要手工编辑登记簿。 一旦一个组件有一个 `knowledge.md` 遵循标准模板,在下一个模板上自动拾取 `npm run mcp:generate-registry`. 生成器为每个组件打印一个完整性分数——目标是80分,方法是在知识文件中包括概览、API参考、使用准则、最佳做法和实例等部分.

## 浏览器支持

克罗姆、边缘、萨法里

## 常见问题

### @boomi/exosphere 是什么？

Web 组件库

### 如何安装 @boomi/exosphere？

在项目目录运行 npm install @boomi/exosphere，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 exosphere-mcp，可以用 npx exosphere-mcp 直接运行。

### @boomi/exosphere 支持 TypeScript 吗？

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

### @boomi/exosphere 支持 ESM 还是 CommonJS？

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

### @boomi/exosphere 可以商用吗？

@boomi/exosphere 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @boomi/exosphere 的下载量有多少？

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

### @boomi/exosphere 还在维护吗？

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