多项目集成下的工程脚手架配置方案

一、背景

随着项目的复杂和功能的增加，一个工程下可能存在多个项目，这个时候我们单独开项目去开发的话项目代码会冗余，项目后期的维护成本也很高，而代码的冗余会造成静态资源包加载时间变长、执行时间也会变长，进而很直接的影响性能和体验。为了解决此问题我们需要实现多项目的分模块打包，且项目之间共享组件和依赖，运行、打包时互不干扰。

二、应用场景

以一个后台管理系统为例，我们同时有运营管理系统、商家管理系统、设备管理系统，还有一些内部的管理系统，这几个系统的菜单管理、权限管理、用户管理等相同业务模块较多，业务组件以及UI组件都要遵循公司的规范，这种情况下就可以用一个repo来管理这些系统， 所有的设计文档、源代码、文件都放在一个repo里面。

三、技术方案

本文基于vue-cli3，核心是vue.config.js文件。vue-cli2实现方法类似，核心是webpack.config.js文件，这里不做过多阐述。

1. 功能

• 项目区分命令化

• 项目配置化

• 路由模块管理

• 项目生成脚本化

2. 技术点

• process.argv^[1] ：获取命令行参数

• cross-env^[2]：设置环境

• fs-extra^[3]：命令行生成项目

• chalk^[4]：命令行美化

• inquirer^[5]：命令行交互

• node-progress^[6]：加载进度条

3. 思路

我们知道在package.json中有项目启动、打包的命令，我们可以从这里入手。我们的思路大概是这样的：

1. 通过命令行输入的项目名称打包指定项目   处理命令行参数；

2. 配置公共文件和项目配置文件;

3. 设置当前运行/打包项目(project.js);

4. 打包项目所需的模块和资源;

npm run dev projectA           # 运行开发环境下的projectA项目
npm run build:dev projectA     # 打包开发环境下的projectA项目
npm run build projectA         # 打包projectA项目

4. 目录结构

.
├── README.md
├── babel.config.js
├── config                 # 配置项
│   ├── build.js           # 打包配置文件
│   ├── copy.js            # 项目生成文件
│   ├── dev.js             # 开发配置文件
│   ├── project.js         # 获取项目项目信息
│   └── projectConfig.js   # 项目配置文件(和普通的脚手架配置项一样) 
├── package.json           # 项目依赖
├── postcss.config.js      # postcss配置文件
├── project                # 工程信息配置             
│   ├── index.js
│   ├── module             # 公共路由模块
│   └── projects           # 公共项目信息
├── public
│   └── index.html
├── src
│   ├── assets              # 公共资源文件
│   │   └── logo.png
│   ├── components          # 公共组件
│   │   ├── 404.vue
│   │   └── main.vue
│   └── projects            # 项目目录(独立的路由 状态管理 接口请求)
│       ├── projectA
│       ├── projectB
│       └── projectC
├── temp                    # 项目模板文件(可根据项目需求定制)
│   ├── App.vue
│   ├── components
│   ├── main.js
│   ├── page
│   │   └── Home.vue
│   ├── router.js
│   └── store.js
├── vue.config.js           # 核心配置文件
└── yarn.lock

13 directories, 26 files

好了，我们的视图目录结构大概就是上面的样子，我们期望的是打包src目录下这个A项目就像打包一个完整的项目一样。那么如何实现这部分呢？

5. 流程图