写在最前
未有知识需要较真，哪里写的不对请指出；
此文章技术栈为vue，vue全家桶了解下～。

一、先抛出几个问题

1.支撑多条生产线，部分功能需要多条生产线同步更新；
2.项目体量不断增大，造成代码不断增加；
3.运营团队需要快速得到一个功能包括(A,B,C)的产品而研发团队只有(A,B)和(B,C)两条生产线。

二、解决方案

1、拷贝源代码

1）想用就拷贝去，在同一组织内没有什么可保密的。

优点：

1）简单快捷，拷贝即可。

缺点：

1）最原始的解决方案，带有原始人平均年龄不超过35岁的基因遗传。

2、Git分支tag解决

1）不同的源码分支或者tag，在有更改时对不同分支进行更改，需要同步时进行分支合并。

优点：

1）实现简单，会Git基本操作就可以完成；
2）代码微调方便，只更改当前分支或者tag源码即可。

缺点：

1）在茫茫多的分支和tag面前效率已经离你而去了；
2）需要重新开始一条生产线不知道选择哪个分支作为基础分支；
3）多条分支同时升级一个功能模块，合并分支时处理冲突难度比较大；
4）出现合并遗漏会造成公共功能升级不同步；
5）基础分支源码在各分支中可能会被更改，最终造成当前分支无法同步主分支功能；
6）代码变得越来越多，后期维护成本极高；
7）会出现多条生产线对同一业务包进行更改最终造成业务包功能差异无法合并。

3、基于组件化解决方案

将核心代码，业务代码分离成不同的项目并编译发布到私有npm服务器上，不同生产线在使用时以资源包的形式进行引用。

优点：

1）使用端黑盒引用，无权修改源码不会造成公共代码被修改；
2）不同业务包独立开发维护，统一整合需求并更改；
3）公共功能更新通知使用端更新相应包的版本即可。

缺点：

1）因为是黑盒调用，各个资源包需要有完善的文档，如果文档不足会造成使用成本提高甚至无法使用；
2）需要建立一整套开发、发布、维护流程控制体系，需要提供统一的资源包查询平台；
3）资源包升级时兼容问题需要考虑。

三、如何实现

1、技术栈

vue,scss,vuex,vue-router,npm,webpack,vue-cli,cnpm私有服务器
各项细节不在这里一一赘述。

2 、结构图

image.png

3、基础项目创建脚手架

npm install pper-vue-cli
ppercli

核心与脚手架源码地址：https://github.com/dreamsleep11/pper