模型上下文协议服务器将嵌入数据（例如 i18n 翻译或键/值配置）从 TypeScript/JavaScript 源代码提取到结构化的 JSON 配置文件中。
特征
- 数据提取：
- 提取字符串文字、模板文字和复杂嵌套对象
- 保留模板变量（例如，
Hello, {{name}}! ） - 支持嵌套对象结构和数组
- 使用点符号维护分层密钥结构
- 通过 JSX 支持处理 TypeScript 和 JavaScript 文件
- 成功提取后，用“MIGRATED TO”替换源文件内容（可配置）
- SVG提取：
- 从 React/TypeScript/JavaScript 文件中提取 SVG 组件
- 保留 SVG 结构和属性
- 删除特定于 React 的代码和道具
- 创建以其组件命名的单个 .svg 文件
- 成功提取后，用“MIGRATED TO”替换源文件内容（可配置）
用法
添加到您的 MCP 客户端配置：
{
"mcpServers": {
"data-extractor": {
"command": "npx",
"args": [
"-y",
"mcp-data-extractor"
],
"disabled": false,
"autoApprove": [
"extract_data",
"extract_svg"
]
}
}
}
基本用法
服务器提供了两个工具：
1.数据提取
使用extract_data从源文件中提取数据（如 i18n 翻译）：
<use_mcp_tool>
<server_name>data-extractor</server_name>
<tool_name>extract_data</tool_name>
<arguments>
{
"sourcePath": "src/translations.ts",
"targetPath": "src/translations.json"
}
</arguments>
</use_mcp_tool>
2. SVG提取
使用extract_svg将 SVG 组件提取到单独的文件中：
<use_mcp_tool>
<server_name>data-extractor</server_name>
<tool_name>extract_svg</tool_name>
<arguments>
{
"sourcePath": "src/components/icons/InspectionIcon.tsx",
"targetDir": "src/assets/icons"
}
</arguments>
</use_mcp_tool>
源文件替换
默认情况下，提取成功后，服务器将用以下内容替换源文件的内容：
- “MIGRATED TO” 用于数据提取
- 用于 SVG 提取的“迁移至”
这有助于追踪哪些文件已被处理，并防止重复提取。此外，LLM 和开发人员在稍后遇到源文件时，也可以轻松查看提取数据所在的位置。
要禁用此行为，请在 MCP 配置中将DISABLE_SOURCE_REPLACEMENT环境变量设置为true ：
{
"mcpServers": {
"data-extractor": {
"command": "npx",
"args": [
"-y",
"mcp-data-extractor"
],
"env": {
"DISABLE_SOURCE_REPLACEMENT": "true"
},
"disabled": false,
"autoApprove": [
"extract_data",
"extract_svg"
]
}
}
}
支持的模式
数据提取模式
数据提取器支持 TypeScript/JavaScript 应用程序中常用的各种模式：
- 简单对象导出：
export default {
welcome: "Welcome to our app",
greeting: "Hello, {name}!",
submit: "Submit form"
};
- 嵌套对象：
export default {
header: {
title: "Book Your Flight",
subtitle: "Find the best deals"
},
footer: {
content: [
"Please refer to {{privacyPolicyUrl}} for details",
"© {{year}} {{companyName}}"
]
}
};
- 具有数组的复杂结构：
export default {
faq: {
heading: "Common questions",
content: [
{
heading: "What if I need to change my flight?",
content: "You can change your flight online if:",
list: [
"You have a flexible fare type",
"Your flight is more than 24 hours away"
]
}
]
}
};
- 带有变量的模板文字：
export default {
greeting: `Hello, {{username}}!`,
message: `Welcome to {{appName}}`
};
输出格式
数据提取输出
提取的数据保存为 JSON 文件，并使用点符号表示嵌套结构：
{
"welcome": "Welcome to our app",
"header.title": "Book Your Flight",
"footer.content.0": "Please refer to {{privacyPolicyUrl}} for details",
"footer.content.1": "© {{year}} {{companyName}}",
"faq.content.0.heading": "What if I need to change my flight?"
}
SVG提取输出
SVG 组件被提取到单独的 .svg 文件中，并删除了 React 特有的代码。例如：
输入（React 组件）：
const InspectionIcon: React.FC<InspectionIconProps> = ({ title }) => (
<svg className="c-tab__icon" width="40px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>{title}</title>
<path className="cls-1" d="M18.89,12.74a3.18,3.18,0,0,1-3.24-3.11..." />
</svg>
);
输出（InspectionIcon.svg）：
<svg width="40px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path class="cls-1" d="M18.89,12.74a3.18,3.18,0,0,1-3.24-3.11..." />
</svg>
扩展支持的模式
提取器使用 Babel 解析并遍历源文件的 AST（抽象语法树）。您可以通过修改源代码来扩展支持的模式：
- 添加新的节点类型：
src/index.ts中的extractStringValue方法处理不同类型的字符串值。扩展它以支持新的节点类型：
private extractStringValue(node: t.Node): string | null {
if (t.isStringLiteral(node)) {
return node.value;
} else if (t.isTemplateLiteral(node)) {
return node.quasis.map(quasi => quasi.value.raw).join('{{}}');
}
// Add support for new node types here
return null;
}
- 自定义值处理：
processValue方法可以处理不同的值类型（字符串、数组、对象）。您可以扩展它以支持新的值类型或自定义处理方式：
private processValue(value: t.Node, currentPath: string[]): void {
if (t.isStringLiteral(value) || t.isTemplateLiteral(value)) {
// Process string values
} else if (t.isArrayExpression(value)) {
// Process arrays
} else if (t.isObjectExpression(value)) {
// Process objects
}
// Add support for new value types here
}
- 自定义 AST 遍历：服务器使用 Babel 的遍历函数来遍历 AST。您可以添加新的访问者来处理不同的节点类型：
traverse(ast, {
ExportDefaultDeclaration(path: NodePath<t.ExportDefaultDeclaration>) {
// Handle default exports
},
// Add new visitors here
});
发展
安装依赖项：
构建服务器：
对于使用自动重建的开发：
调试
由于 MCP 服务器通过 stdio 进行通信，调试起来可能比较困难。我们推荐使用MCP Inspector ，它以包脚本的形式提供：
检查器将提供一个 URL 来访问浏览器中的调试工具。
执照
该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅LICENSE文件。