universal-code-extractor

Universal Code Extractor

一个智能的多框架代码提取工具，支持 React、Vue 等框架，可以自动分析项目结构，识别组件依赖关系，并提取完整的组件代码及其依赖。

✨ 特性

• 🔧 多框架支持 - React、Vue（可扩展更多框架）
• 🔍 自动框架检测 - 根据文件类型自动识别项目框架
• 📦 智能依赖分析 - 自动追踪 import/export 依赖链
• 🌲 Tree-shaking - 只提取实际使用的代码，移除未使用的导出
• 📄 Vue SFC 支持 - 完整支持 Vue 单文件组件（template/script/style）
• 🔌 插件架构 - 易于扩展支持新框架
• 📝 路径别名支持 - 支持 @/、~/ 等常见路径别名

📦 安装

# 全局安装
npm install -g universal-code-extractor

# 或者本地安装
npm install universal-code-extractor

从源码安装

git clone https://github.com/yu1596882018/universal-code-extractor.git
cd universal-code-extractor
npm install

🛠️ 使用方法

基本用法

# 查看帮助
node src/index.js help

# 列出项目中所有可用组件
node src/index.js list

# 提取指定组件（自动检测框架）
node src/index.js extract 组件名

# 指定框架类型
node src/index.js extract 组件名 --framework react
node src/index.js extract 组件名 --framework vue

React 项目

# 列出 React 组件
node src/index.js list --framework react --project ./my-react-app

# 提取 React 组件
node src/index.js extract UserProfile --framework react --output ./extracted

Vue 项目

# 列出 Vue 组件
node src/index.js list --framework vue --project ./my-vue-app

# 提取 Vue 组件
node src/index.js extract UserCard --framework vue --output ./extracted

自动检测框架

# 自动检测并提取
node src/index.js extract MyComponent --project ./my-project

# 仅检测框架类型
node src/index.js detect --project ./my-project

📁 项目结构

src/
├── index.js              # 主入口和命令行接口
├── base-extractor.js     # 基础提取器（通用逻辑）
└── adapters/
    ├── index.js          # 适配器注册和工厂
    ├── base-adapter.js   # 适配器基类（接口定义）
    ├── react-adapter.js  # React 适配器
    └── vue-adapter.js    # Vue 适配器

🔌 扩展新框架

创建新适配器只需继承 BaseAdapter 并实现必要方法：

const BaseAdapter = require('./base-adapter');

class AngularAdapter extends BaseAdapter {
    constructor() {
        super();
        this.name = 'angular';
        this.displayName = 'Angular';
    }

    getSupportedExtensions() {
        return ['.ts', '.component.ts', '.html'];
    }

    getComponentPatterns(componentName) {
        return [
            new RegExp(`@Component.*${componentName}`, 'i'),
            // ...更多模式
        ];
    }

    // 实现其他必要方法...
}

module.exports = AngularAdapter;

然后在 adapters/index.js 中注册：

const adapters = {
    react: ReactAdapter,
    vue: VueAdapter,
    angular: AngularAdapter  // 添加新适配器
};

⚙️ 配置选项

选项	说明	默认值
--project	项目路径	当前目录
--output	输出路径	./extracted
--framework	框架类型	自动检测

📋 命令列表

命令	说明
list	列出所有可用组件
extract <组件名>	提取指定组件
extract-page <页面名>	提取指定页面
detect	检测项目框架
frameworks	列出支持的框架
help	显示帮助信息

⚠️ 注意事项

• 工具会自动分析并提取内部依赖，外部 npm 包依赖需要手动安装
• Vue SFC 文件（.vue）会保持原始结构，不进行 tree-shaking
• 某些复杂的依赖关系可能需要手动调整
• 建议在提取前备份原始项目

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个工具！

添加新框架支持

• 在 src/adapters/ 下创建新的适配器文件
• 继承 BaseAdapter 并实现所有抽象方法
• 在 adapters/index.js 中注册适配器
• 提交 PR

祝您使用愉快！🎉