Vite Plugin Code Reuse

一个用于在项目间复用代码的 Vite 插件，支持从 Git 仓库自动克隆/更新代码，并提供灵活的路径映射和导入替换功能。

功能特性

• 🔄 自动代码管理: 从 Git 仓库自动克隆和更新代码
• 🗺️ 路径映射: 灵活配置路径映射规则
• 🔄 导入替换: 支持文件替换、代码替换和路径重定向
• 📦 自动导入: 集成自动导入配置

安装

npm install vite-plugin-code-reuse --save-dev

快速开始

// vite.config.ts
import { defineConfig } from 'vite'
import codeReusePlugin from 'vite-plugin-code-reuse'

export default defineConfig({
  plugins: [
    codeReusePlugin({
      // 代码库配置
      repositories: [
          {
              url: 'http://gitlab.xinglianhealth.com/web/mdm/xlian-web-mdm.git',
              branch: 'h5_4.9',
              dir: 'mdm-pc'
          }
      ],
      // 修正重复的路径别名映射配置，比如当前项目存在@ alias,被引用的项目@路径解析会出错， 将被引用的项目 中 @/ 开头的路径修正
      repoImportMappings: [
          {
              alias: '@',
              repoDir: 'mdm-pc',
              // 忽略某些路径不进行修正
              ignorePatterns: ['src/router', 'src/store', 'src/axios']
          }
      ],
      // 导入替换配置
      importReplacements: [
          {
              pattern: /\/views\/MasterData\/components\/UploadFile\.vue$/,
              file: 'src/components/MbUpload.vue' // 使用文件替换
          },
          {
              pattern: /\/views\/MasterData\/components\/TextInput\.vue$/,
              file: 'src/components/MbTextInput.vue'
          },
          {
              pattern: /\/views\/MasterData\/components\/LabelScope\.vue$/,
              code: '<template><slot /></template>' // 使用代码替换
          },
          {
              pattern: /\/views\/MasterData\/components\/MasterForm\.vue$/,
              file: 'src/components/MbForm.vue'
          },
          {
              pattern: /\/views\/MasterData\/components\/SenseText\.vue$/,
              file: 'src/components/SenseText.vue'
          },
          {
              pattern: /\/views\/MasterData\/components\/HeaderFilter\/HeaderFilter\.vue$/,
              code: '<template></template>'
          },
          {
              pattern: /^@?element-plus/,
              resolve: path.resolve('src/components/ElementPlus.ts') // 重定向解析
          }
      ],
    })
  ]
})

配置选项

RepositoryConfig

| 属性 | 类型 | 必填 | 描述 | |------|------|------|------| | url | string | 是 | Git 仓库 URL | | branch | string | 是 | 分支名 | | dir | string | 是 | 本地存放目录名 |

RepoImportMappings

| 属性 | 类型 | 必填 | 描述 | |------|------|------|------| | alias | string | 是 | 路径别名 | | repoDir | string | 是 | 引用的仓库目录名 | | ignorePatterns | string[] | 否 | 忽略匹配的路径模式 |

ImportReplacementConfig

| 属性 | 类型 | 必填 | 描述 | |------|------|------|------| | pattern | string | 是 | 匹配模式（正则表达式字符串） | | code | string | 否 | 替换为代码字符串 | | file | string | 否 | 替换为文件内容 | | resolve | string | 否 | 重定向到新路径 |

注意：code、file、resolve 三选一

使用场景

1. 多端代码复用: H5 项目复用 PC 端组件和逻辑
2. 组件库管理: 从私有仓库管理共享组件
3. 工具函数共享: 跨项目共享工具函数
4. 主题定制: 替换特定组件以适应不同项目需求

注意事项

• 确保 Git 仓库有正确的访问权限
• 路径映射会影响模块解析，谨慎配置
• 导入替换会完全替换原始导入，确保替换内容兼容
• 建议在开发环境测试配置是否正确

许可证

MIT