前端公用模块管理（多项目之间）

遇到的问题：公司并行开发的三个前端项目A,B,C。其中B项目和C项目需要用到A项目里开发的系统管理模块common。一方面系统管理模块有很多页面。不想总是复制粘贴，会很麻烦。另一方面对于后期这个共有模块的修改，每次修改都需要更改好几个项目。也会很麻烦。所以打算实现如下功能：

1. 多项目之间代码相互独立，互不干扰。
2. 公用代码只在一处管理。可以实现一处更新，其他项目能够以最少工作量来完成共有代码的更新。

下面是我在查询，实践过程中总结的几个方法以及适用范围，希望可以帮助到大家。
说明：前端使用的VUE框架，svn1是A项目的svn库，svn2是B项目的svn库。截图中的pro1即A项目，pro2即B项目。

方法一：公共仓库管理工具

一.svn管理公共模块
这个方法主要是利用SVN的“Externals”功能。例如项目B，和项目C想要使用项目A中的common模块。这个common模块的代码可能在很多处使用，但是实际管理的代码只有一份。那这个时候就很适合这个方法。目录结构如下：
项目A目录如下,common下有系统设置页面，系统预警页面等等。

项目B目录如下。

具体实现步骤如下：（说明：svn1是A项目的svn库，svn2是B项目的svn库）

1. 进入B项目目录下，右击选择“TortoiseSVN”->选择"版本库浏览器"
   

2. 打开svn版本浏览器后即可显示下面页面，这里的SVN2就是B项目的SVN库。右击选择“显示属性“->在属性弹出框中选择“新建”->"外部“。
   
   

3. 选择新建->填入A项目中common的SVN路径和在B项目中的本地名称->点击确定，确定，在确定就可以了。
   

4. 所有确定后，还需要再B项目下执行以下“更新”。更新项目目录对比如下：
   
   测试：在A项目中公用模块common中新建一个test.txt,提交svn。再在B项目中更新。B项目中的common_B也更新了代码。C项目的引用同B项目。到这一步SVN的公共代码管理就完成了。
   
   
   总结：B项目中common_B模块其实就是利用svn的外部引用，引用A项目中的common公共模块，来实现公用代码的使用管理。但是B项目也可以更改引用的公用代码，然后提交从而影响到其他项目。这算是这个方法一个弊端。但是一般公共代码只能由专门的开发人员或者部门来管理。开发过程中注意一些也是可以避免的。大家可以权衡一下利弊，采用适合的方法。
   参考文章：https://www.cnblogs.com/guogangj/archive/2012/03/15/2398170.html
   二.git subtree公共仓库管理工具
   git subtree对公共代码模块的管理，是把公共模块common放在了子仓库里.。A,B,C项目是父仓库，在父仓库中引用子仓库里的代码。利弊和SVN没有什么区别。子仓库更新提交后，父仓库可以拉去更新，父仓库修改也可以提交，子仓库也会更改。感兴趣的小伙伴可以参考以下网址实现。我就是跟着他一步一步实现的，很推荐：
   http://t.zoukankan.com/steamed-twisted-roll-p-13802373.html

方法二：npm

1. 注册npm
   注册地址：https://www.npmjs.com/signup
   按照上边的要求输入的全名、用户名、邮箱、密码进行注册。输入完成后点击下边的注册就可以创建自己的npm账号成功
2. 登录npm
   打开cmd命令行，输入 npm login
   分别输入用户名，密码，邮箱，如下图所示
   
3. 推送
   推送之前在需要推送的文件下初始化npm: npm init
   输入对应信息即可。包括包名，版本号，描述等。keywords是搜索关键字。
   初始化后可在目录下查看是否生成package-lock.json，package-lock.json是包信息。最后推送npm:npm publish
4. 下载至项目
   打开B项目，在B项目下执行 npm insatll common_npm(common_npm是包名)。
   
   
   目录如下：

--A项目                      --B项目
  --common                       --node_modules
  --...                                      --common   
                                 --...

总结：npm的方法更适合依赖对外界较少的公用组件管理。同时由于npm推送还需要牵扯到邮箱的验证，推送起来相对麻烦，不适合频繁改动的公用代码的管理。显然，如果是对有业务逻辑的页面来说，这并不是个好的方法。因为common中有很多业务逻辑的页面，比如登录，系统设置，管理员管理等。这些页面牵扯到后端请求地址，图片以及页面的跳转等等。当然如果全部改成组件化渲染的页面，对外面的依赖都转化成组件渲染的参数也是可以的。但是需要考虑的是修改带来的人工成本，以及对人员组件化代码编辑的能力的要求。即：
npm适用范围：
1.不需要频繁变动更改的组件。
2.对外界依赖较少，或者相对独立的组件。

方法三：利用vue-cli脚手架的webpack配置，完成公共代码的管理。

前提条件：
1.项目B使用vue-cli脚手架
2.项目B可通过路径访问到项目A
我的 项目A和项目B的目录关系如下图所示：

1. 项目B配置开发环境配置文件 webpack.base.conf.js：
   

这里的Templates在B项目中就代表A项目（pro1）中的common模块了。

2.项目B中的登录，系统设置等引用项目A中的common模块中的相应页面：在B项目中的路由管理中修改对应页面
router/index.js中设置。

3.重新运行项目B：npm run dev就ok啦。打包上线我也测试了，引用是没有问题的。

好了，以上就是我实测的几个方法，有不完善的地方欢迎大家补充留言，祝新的一年，我们共同进步！