外层
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+
安装
安装所有依赖关系
npm install
预启动( 只一次)
输入代码时添加 git 钩子以运行单位测试
npm run prestart
故事书
在http://localhost:6006上以监视模式运行故事书,并用热模块替换来进行开发. 代码的更改可以立即被预览.
npm run storybook
构建
创建 Javascript 和样式捆绑 。 另外,将网络组件包成反应使用
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 转到您的工程根 :
{
"mcpServers": {
"exosphere": {
"command": "node",
"args": ["./node_modules/@boomi/exosphere/dist/mcp-server/index.js"]
}
}
}
要禁用此行为, 设置 EXOSPHERE_SKIP_MCP=1。使用其中之一:
# Shell profile (~/.zshrc, ~/.bashrc)
export EXOSPHERE_SKIP_MCP=1
# .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 文件,重建登记册并手动捆绑:
npm run mcp:build
这有三步顺序:
mcp:generate-registry- 重新确认所有knowledge.md, (中文(简体) ),.ts, (中文(简体) ),.stories.ts,反应包装,以及.styles.ts文件 – 写mcp-server/data/component-registry.json财务报告和审定财务报表icon-registry.jsonmcp:bundle——将 MCP 服务器 + 所有依赖性捆绑为一个自成一体的dist/mcp-server/index.jsmcp:copy-data- 将JSON文件复制到dist/mcp-server/data/
MCP建设也被纳入了全生产建设(npm run build),因此登记册总是在已公布的软件包中更新.
在登记册中添加一个新的组成部分:
不需要手工编辑登记簿。 一旦一个组件有一个 knowledge.md 遵循标准模板,在下一个模板上自动拾取 npm run mcp:generate-registry. 生成器为每个组件打印一个完整性分数——目标是80分,方法是在知识文件中包括概览、API参考、使用准则、最佳做法和实例等部分.
浏览器支持
克罗姆、边缘、萨法里