AngularJS产品拆分：同一Git仓下核心与客户定制项目方案咨询

嘿，我之前刚好处理过类似的AngularJS多客户定制场景，结合你的需求，给你一套低成本、易维护的拆分方案，完全适配同一仓库的需求：

核心原则是95%通用代码固化为核心库，客户定制代码完全隔离在专属目录，通过AngularJS的模块机制、装饰器特性，配合构建脚本实现按需打包部署。

一、仓库目录结构设计 #

这是方案的基础，清晰的目录能避免代码混乱，同时让Git管理更简单：

├── app/
│   ├── core/                  # 95%+通用核心功能（不可随意修改）
│   │   ├── components/        # 5个基础核心组件
│   │   ├── services/          # 通用业务服务、工具类
│   │   ├── routes/            # 通用路由与菜单配置
│   │   ├── core.module.js     # 核心模块入口（定义依赖、初始化逻辑）
│   │   └── core.config.js     # 全局通用配置（如API地址模板、默认主题）
│   └── clients/               # 客户定制专属目录（每个客户一个子目录）
│       ├── client1/
│       │   ├── components/    # 客户1新增的专属组件
│       │   ├── routes/        # 客户1扩展的路由（新增菜单项）
│       │   ├── client1.module.js
│       │   └── client1.config.js
│       └── client2/
│           ├── directives/    # 客户2对核心组件的修改逻辑
│           ├── styles/        # RTL布局专属样式
│           ├── client2.module.js
│           └── client2.config.js
├── gulpfile.js/               # 支持指定客户的构建脚本
└── package.json

二、定制化实现方案 #

1. 模块依赖与扩展 #

AngularJS的模块机制天然支持扩展，每个客户的定制模块直接依赖核心模块即可：

// client1.module.js
angular.module('client1', ['core'])
  .run(function(MenuService) {
    // 向核心菜单服务添加客户1专属菜单项
    MenuService.addItem({
      title: '客户1专属功能',
      url: '/client1/custom'
    });
  });

2. 核心组件修改（客户2场景） #

绝对不要直接修改core目录下的组件，用AngularJS的$provide.decorator来覆盖原有组件的逻辑：

// client2/directives/core-component-decorator.js
angular.module('client2')
  .config(function($provide) {
    // 装饰核心组件指令，注入RTL相关逻辑
    $provide.decorator('coreTableDirective', function($delegate) {
      const originalLink = $delegate[0].link;
      $delegate[0].link = function(scope, element, attrs) {
        // 先执行核心组件原有逻辑
        originalLink.apply(this, arguments);
        // 添加客户2的RTL样式与行为
        element.addClass('rtl-table');
        scope.sortDirection = 'reverse';
      };
      return $delegate;
    });
  });

3. 布局与样式定制（客户2 RTL场景） #

主产品用CSS变量定义基础布局，客户定制仅需覆盖变量即可：

/* core/styles/layout.css */
.container {
  direction: var(--layout-direction, ltr);
  text-align: var(--text-align, left);
}

/* client2/styles/rtl-override.css */
:root {
  --layout-direction: rtl;
  --text-align: right;
}

三、构建与部署方案 #

用Gulp或Webpack写一个支持参数的构建脚本，按需打包核心代码+指定客户的定制代码：

// gulpfile.js核心片段
const gulp = require('gulp');
const concat = require('gulp-concat');
const argv = require('yargs').argv;

gulp.task('build', function() {
  const targetClient = argv.client || 'default';
  let buildSources = [
    'app/core/**/*.js',
    'app/core/**/*.css'
  ];

  // 若指定客户，追加其定制代码
  if (targetClient !== 'default') {
    buildSources.push(`app/clients/${targetClient}/**/*.js`);
    buildSources.push(`app/clients/${targetClient}/**/*.css`);
  }

  // 打包JS
  gulp.src(buildSources.filter(src => src.endsWith('.js')))
    .pipe(concat('app.js'))
    .pipe(gulp.dest(`dist/${targetClient}/`));

  // 打包CSS与静态资源
  // ...省略类似逻辑
});

部署时只需运行gulp build --client=client1，生成的dist/client1目录就是该客户的完整部署包。

四、维护建议 #

• 核心代码锁死：制定规范，禁止直接修改core目录代码，所有变更必须经过多客户兼容性测试。
• 定制文档化：每个客户目录下写README.md，记录定制点、依赖的核心版本、修改原因，避免后续维护踩坑。
• CI/CD自动化：在CI流程中添加多客户的自动化测试，确保核心代码变更不会影响任何客户的功能。
• 复用提取：若多个客户有相似定制，将这部分逻辑提取到core的extensions目录，作为可选模块供客户依赖。

内容的提问来源于stack exchange，提问作者joshua miller