前端项目继承，在A项目中继承base项目，使用vue2

背景：公司有项目A、B、C，A、B、C中均有相同的功能模块，为了方便相同部分代码的后续开发与维护工作，故将相同部分提出来变成base项目，A、B、C项目继承base，无须再写公共部分功能，只需开发各自的功能即可。
同时对于base项目的代码开发与维护工作，团队相应成员都有权限进行操作。

1、市面上现存的管理方式

对于公共项目的管理，目前市面上有模块联邦、npm包、monorepo、qiankun、subtree、submodule等集中管理方式。

• npm包：
  直接npm安装，但是涉及到业务，会有很多私有接口，还有购买私域，故被否决。如果你的模块没有涉及到业务类，npm包不妨是一个最简单又最方便使用的一种方式。
• 模块联邦：
  需要webpack的版本在5.0以上，我们项目webpack为4.0，故否决。

又因为领导对base项目的要求，仅是代码块即可，不需要变成一个独立运行的项目；可以进行版本控制。
故选择subtree方式进行代码管理。

2、如何使用subtree

• 创建base项目的地址
• 将base项目拉取到父项目，在父项目执行

git subtree add --prefix=src/components http://gitlab.local/basei.git master

说明：--prefix=src/components   //在父项目存放的位置
      http://gitlab.local/basei.git   //子项目存放的远端地址
      master   //base项目的分支名称 
1
2
3
4
5

• 在父项目中提交对base项目的修改

git add . 
git commit -m '提交子项目修改项' 
// 退回到项目的根路径提交到远端
git subtree pull --prefix=src/components http://gitlab.local/basei.git master // 拉取远端最新代码
git subtree push --prefix=src/components http://gitlab.local/basei.git master // 提交本地base代码至远端
1
2
3
4
5

• 简化上述命令

// 将子项目地址作为一个remote,名称为【base】在父项目执行：
 git remote add -f base http://gitlab.local/basei.git

 git subtree add --prefix=trunk/front-end/src/base base master // 全路径

 * 以上操作会将整个子项目的提交历史合并到父存储库中

 * 更新
 ` git subtree pull --prefix=trunk/front-end/src/base base master `

 * 提交--会在远端生成一个叫hotfix/components_xxx的分支
 ` git subtree push --prefix=trunk/front-end/src/base base master `
 
 * 删除当前remote
` git remote remove base `
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

代码部分

store继承

base中的store

// state.ts
import { MessageInfo } from '../types/message.interface'
export interface State {
	webSocketMessage: MessageInfo
}

export const state: State = {
	webSocketMessage: {
		type: "",
		body: null,
		regionId: 0
	}
}
// mutation.ts
export default {
	setWebSocketMessage(state: State, value: MessageInfo) {
		state.webSocketMessage = Object.assign({}, value);
	}
}
// action.ts
export default {
    handleWebSocketMessage({ commit }, webSocketMessage) {
        commit("setWebSocketMessage", webSocketMessage)
    }
}
// index.ts -------------------主要是这里
import { State, state } from './state'
// 接口继承
export interface BaseState extends State {}

const baseState:BaseState  = { ...state }
const baseMutations = { ...mutations }
const baseActions = { ...actions }

export const BaseStore = {
    baseState,
	baseMutations,
    baseActions
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

项目A中的store继承BaseStore

// index.ts
import Vue from "vue";
import Vuex from "vuex";
import { state, State } from './state'
import actions from './action'
import mutations from './mutation'
import { BaseStore, BaseState } from '@/base/store/index'

Vue.use(Vuex);

interface CombiantState extends BaseState, State {}


const CombinatState: CombiantState = {...state, ...BaseStore.baseState}
const CombinatMutations = Object.assign({}, mutations, BaseStore.baseMutations)
const CombinatAction = Object.assign({}, actions, BaseStore.baseActions)

export default new Vuex.Store({
    state: CombinatState,
	mutations: CombinatMutations,
    actions: CombinatAction
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22