Vite Plugin Code Reuse

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

功能特性

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

安装

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

快速开始

`typescript
// 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: '' // 使用代码替换
},
{
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: ''
},
{
pattern: /^@?element-plus/,
resolve: path.resolve('src/components/ElementPlus.ts') // 重定向解析
}
],
})
]
})
`

配置选项

$3

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

$3

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

$3

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

注意：code、file、resolve` 三选一

使用场景

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

注意事项

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

许可证

MIT