mcpField
D
datahub-mfe-create-app

datahub-mfe-create-app

github.com/datahub-project开发45157 次安装4 周前更新
代码仓库

关于 datahub-mfe-create-app

用于通过 Webpack Module Federation 搭建 DataHub 微前端应用的技能。它收集应用设置，生成 7 个配置文件，并引导安装、启动和验证。

主要功能

  1. 01收集应用名称、描述、端口和 API 需求
  2. 02生成 7 个应用及配置文件
  3. 03按需配置 GraphQL 代理
  4. 04指导安装并启动开发服务器
  5. 05验证远程入口和独立页面

适用场景

  1. 01启动新的 DataHub MFE 应用
  2. 02创建带 GraphQL 代理的脚手架
  3. 03检查开发应用是否正常提供页面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/datahub-project/datahub-skills --skill datahub-mfe-create-app

安装后在 Claude Code 中输入/datahub-mfe-create-app确认已加载。

附带文件assets/templates.md

详细介绍

创建 DataHub MFE 应用

构建一个完整可用的微前端应用，通过 Webpack Module Federation 与 DataHub 集成。生成全部 7 个必需文件，并引导用户完成构建和验证。

第 1 步：收集信息

在一次调用中使用 AskQuestion 工具收集以下信息。

问题ID选项
应用名称（kebab-case，例如 team-dashboard）app_nametest-app / N/A - I'll fill it in later
简要描述应用的功能app_desctest-description / N/A - I'll fill it in later
开发服务器端口port3002 / 3003 / 3004 / 3005 / 3006
应用是否需要调用 DataHub GraphQL API？needs_graphqlYes / No

对于 app_name 和 app_desc，仅提供 N/A - I'll fill it in later 选项 — 不要根据工作区建议任何值。用户会自行输入。

根据 app_name 派生名称

给定类似 team-dashboard 的 app_name：

  • 目录：team-dashboard-mfe/（如果尚未包含 -mfe，则追加）
  • Module Federation 名称（MF_NAME）：转换为 camelCase 并追加 MFE — teamDashboardMFE
  • 包名称：与目录名称相同，例如 team-dashboard-mfe
  • 显示标签：将各单词转换为标题格式，例如 Team Dashboard

第 2 步：生成文件

在工作区根目录下创建目录（与 datahub-web-react/ 同级）。 使用 templates.md 中的模板生成全部 7 个文件。

对每个模板应用以下替换：

占位符值
__APP_DIR__目录名称
__PACKAGE_NAME__包名称
__APP_DESCRIPTION__用户提供的描述
__PORT__开发服务器端口
__MF_NAME__Module Federation 名称（camelCase + MFE）
__DISPLAY_LABEL__标题格式的标签
__PUBLIC_PATH_DEV__http://localhost:<PORT>/

如果 needs_graphql 为 Yes，则在 webpack.config.js 中包含 GraphQL 代理代码块（模板中以 {{GRAPHQL_PROXY}} 标记）。如果为 No，则完全省略。

要生成的文件
  1. package.json
  2. webpack.config.js
  3. src/mount.tsx
  4. src/index.tsx
  5. src/App.tsx
  6. tsconfig.json
  7. public/index.html

第 3 步：安装并启动

首先 cd 进入应用目录 — 必须在该目录内启动 webpack，而不是在工作区根目录启动。

cd __APP_DIR__
npm install
npm start

等待 webpack 编译完成。开发服务器应在配置的端口上启动。

第 4 步：验证

  1. 在浏览器中打开 http://localhost:<PORT>/remoteEntry.js，或使用 curl 请求。 应返回 JavaScript（而不是 404 或 HTML 错误页面）。
  2. 打开 http://localhost:<PORT>/ — 应显示独立开发页面。

如果任一检查失败，请查看 webpack 输出中的错误并修复后再继续。

第 5 步：后续步骤

告诉用户：

你的 MFE 应用正在运行！要将其与 DataHub 集成，请使用 datahub-mfe-configure-app 技能 — 它会引导你将此应用添加到 DataHub 前端配置中，使其显示在 /mfe/<path> 下，并可选择将其添加到导航侧边栏。

提供已创建内容的摘要：

Created __APP_DIR__/ with 7 files:
  package.json          — dependencies and scripts
  webpack.config.js     — Module Federation + dev server
  src/mount.tsx         — mount() contract for DataHub
  src/index.tsx         — standalone dev entry point
  src/App.tsx           — starter React component
  tsconfig.json         — TypeScript config
  public/index.html     — dev HTML shell

Module Federation name: __MF_NAME__   ← use this as "MFE app name" in datahub-mfe-configure-app
Remote entry URL:       http://localhost:__PORT__/remoteEntry.js
Module path:            __MF_NAME__/mount

评论

支持 Markdown