TypeScript/JavaScript 소스 코드에서 내장된 데이터(i18n 번역이나 키/값 구성 등)를 추출하여 구조화된 JSON 구성 파일에 저장하는 모델 컨텍스트 프로토콜 서버입니다.
특징
데이터 추출:
문자열 리터럴, 템플릿 리터럴 및 복잡한 중첩 객체를 추출합니다.
템플릿 변수(예: Hello, {{name}}! )를 보존합니다.
중첩된 객체 구조 및 배열을 지원합니다.
점 표기법을 사용하여 계층적 키 구조를 유지합니다.
JSX 지원을 통해 TypeScript 및 JavaScript 파일을 모두 처리합니다.
성공적인 추출 후 소스 파일 내용을 "MIGRATED TO"로 바꿉니다(구성 가능)
SVG 추출:
React/TypeScript/JavaScript 파일에서 SVG 구성 요소를 추출합니다.
SVG 구조 및 속성을 보존합니다.
React 관련 코드와 속성을 제거합니다.
구성 요소의 이름을 따서 개별 .svg 파일을 만듭니다.
성공적인 추출 후 소스 파일 내용을 "MIGRATED TO"로 바꿉니다(구성 가능)
Related MCP server: mcp-server-code-assist
용법
MCP 클라이언트 구성에 추가:
지엑스피1
기본 사용법
서버는 두 가지 도구를 제공합니다.
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>
소스 파일 교체
기본적으로 추출이 성공적으로 완료되면 서버는 소스 파일의 내용을 다음으로 바꿉니다.
이를 통해 이미 처리된 파일을 추적하고 중복 추출을 방지할 수 있습니다. 또한 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 구성 요소는 React 관련 코드가 제거된 개별 .svg 파일로 추출됩니다. 예:
입력(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 순회 : 서버는 바벨의 순회를 사용하여 AST를 순회합니다. 다양한 노드 유형을 처리하기 위해 새로운 방문자를 추가할 수 있습니다.
traverse(ast, {
ExportDefaultDeclaration(path: NodePath<t.ExportDefaultDeclaration>) {
// Handle default exports
},
// Add new visitors here
});
개발
종속성 설치:
서버를 빌드하세요:
자동 재빌드를 사용한 개발의 경우:
디버깅
MCP 서버는 stdio를 통해 통신하므로 디버깅이 어려울 수 있습니다. 패키지 스크립트로 제공되는 MCP Inspector를 사용하는 것이 좋습니다.
검사기는 브라우저에서 디버깅 도구에 액세스할 수 있는 URL을 제공합니다.
특허
이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.
