monorepo模式下的项目开发

        本文旨在提高项目开发效率，降低代码维护成本，解决代码复用度低的问题。

         公司的项目通常是 '一机双屏'的类型，即一个pc管理系统（mis）+ 一个gis系统，通常外加一个大屏系统（包含gis）;

        以往我们采用的是multirepo(多仓库)，即pc项目一个仓库，大屏系统一个仓库，但带来的问题是，这两个项目的技术栈大概率是一样的，而且pc系统中的gis系统和大屏中的gis系统，业务功能也基本一样，但因为采用的是multirepo方式，所以gis的代码会有两份，同样的功能在一端做了一遍后需要copy到另一端，大大降低gis的代码复用度，且每次mis或者gis进行修改需要更新版本后，得需要整体打包更新，这样的方式并不优雅；

        但假如采用monorepo（单体仓库）的形式，首先我们可以基于统一的技术栈搭建项目骨架，将mis系统和大屏系统放入一个仓库中（假设这个项目中，这个大屏和mis系统是配套相关联的），他们共同的依赖可以利用pnpm的workspace特性安装至最外层（减少重复安装的问题以及依赖不一致的问题），并且mis和大屏共同依赖的组件components、工具函数utils等也可以提取出来等，最重要的是三维开发人员只需要维护该仓库中的这一处代码即可完成pc系统和大屏系统的开发，并且gis和mis可以独立开发部署更新；

首先，我们需要安装pnpm包管理工具;

一个基础vue2.x项目结构如图:

针对公司的项目类型，假如是一机双屏和大屏的这种模式，可以采用pnpm + monorepo的，项目结构如下:

mis和gis采用window.postMessage()以及window.addEventListener("message")进行数据交互:

 

具体代码可参考https://github.com/lingjinming/vue2-monorepo.git