多个项目公用组件库设计

项目背景**

1. A 项目在开发过程中需要独立一部分业务出去用作内网访问（财务模块，库存等模块）， 于是在A项目的基础上分割出B项目（Vue， Element-ui）

2. C项目在开发完成后暂时搁置， D项目作为C项目的另一条业务线，部分业务逻辑， 组件和C项目重叠(React, Dva, Ant-ui)

遇到的问题
A项目和B项目有很大一部分公用文件

• Js（校验js， 业务数据处理的js等）
• css（reset.css等）
• 图标
• 字体
• 组件（基础组件， 业务组件）

解决方案

1. 建立git仓库管理公用文件

2. 将仓库放在项目根目录使用webpac中的resolve.alias中配置的别名使用

以下是目录结构以及别名配置

├── publicResource                                         // 公共代码目录 别名$pRoot 
│   ├── publicBasicsComponents                             // 公共基础组件 别名$pRootBC 
│   │   ├── ...                              			
│   ├── publicBusinessComponents                           // 公共业务组件 别名$pRootBuC 
│   │   ├── ...                              
│   ├── publicStatic                                   // 公共静态文件 别名$pRootStatic 
│   │   ├── publicDocs                                 // 公共模版文件  
│   │   ├── publicFonts                                // 公共字体文件 
│   │   ├── publicImgs                                 // 公共图片文件 
│   ├── publicUtils                                   // 公共方法 别名$pRootUtils 
│   │   ├── ...     
│   │   index.js                                    // 引入共用组件
│   src
│   package.json	

webpack配置

// webpack.config.js
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        '$pRoot': resolve('publicResource'),
        '$pRootBC': resolve('publicResource/publicBasicsComponents'),
        '$pRootBuC': resolve('publicResource/publicBusinessComponents'),
        '$pRootStatic': resolve('publicResource/publicStatic'),
        '$pRootUtils': resolve('publicResource/publicUtils'),
    }
},

公用组件配置

// publicResource/index.js
import Vue from 'vue'

// 公用js
import api from '$pRootUtils/api'  
Vue.prototype.$api = api

// 公用组件
import TestComponents from '$pRootBC/test'
Vue.component('TestComponents', TestComponents)

项目中引入仓库的方法

// src/main.js
import '../publicResource'

优化点

使用脚本来自动化代码更新(shell, powershell)

1. 每次新建分支使用脚本自动拉取公共代码

mkdir publicResource
cd publicResource
git init
git remote add origin xxxx
git pull origin master
cd ..

2. 在开发过程中为了保证，代码库是最新的可以写个脚本用来pull

git pull  
cd publicResource
git pull origin master
cd ..

其他优化点

可以使用git子模块来管理公用代码仓库