背景

在常规的产品/项目研发过程中，有很多的产品/项目有功能模块或者页面；有业务上的交集（需要复用）。通常在开发周期比较紧急的情况下，都是直接复制页面代码或者源文件直接使用。那么我们如何能够巧妙的使用公共页面/模块呢？今天咱们就从版本管理的角度进行剖析一下！

使用git submodule

在github新建主项目
在github新建子项目（公共页面或者模块项目）
在主项目关联子项目
配置使用

下面我们具体看看如何实现

关联子项目

使用git submodule add 关联子项目，该子项目包含公共页面或者模块

$ git submodule add https://github.com/子项目
Cloning into '子项目'...
remote: Counting objects: 11, done.
remote: Compressing objects: 100% (10/10), done.
remote: Total 11 (delta 0), reused 11 (delta 0)
Unpacking objects: 100% (11/11), done.
Checking connectivity... done.

首先应当注意到新的 .gitmodules 文件。该配置文件保存了项目 URL 与已经拉取的本地目录之间的映射：

[submodule "子项目"]
path = DbConnector
url = https://github.com/子项目

使用带有子项目的前端项目

拉取带有子项目的前端代码

$ git clone https://github.com/主项目
Cloning into '主项目'...
remote: Counting objects: 14, done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 14 (delta 1), reused 13 (delta 0)
Unpacking objects: 100% (14/14), done.
Checking connectivity... done.

拉取完成之后，主项目虽然有子项目的文件夹；但是文件夹是空的。这是为什么呢？那是因为子项目在主项目代码完成拉取之后还需要进行单独到的初始化。

初始化子项目

初始化本地配置文件

$ git submodule init

从该项目中抓取所有数据并检出父项目中列出的合适的提交

git submodule update

合并为一行命令执行

git submodule update --init

直接拉取主子项目

$ git clone --recurse-submodules https://github.com/主项目
Cloning into '主项目'...
remote: Counting objects: 14, done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 14 (delta 1), reused 13 (delta 0)
Unpacking objects: 100% (14/14), done.
Checking connectivity... done.
Submodule '子项目' (https://github.com/chaconinc/DbConnector) registered for path '子项目'
Cloning into '子项目'...
remote: Counting objects: 11, done.
remote: Compressing objects: 100% (10/10), done.
remote: Total 11 (delta 0), reused 11 (delta 0)
Unpacking objects: 100% (11/11), done.
Checking connectivity... done.
Submodule path '子项目': checked out 'xxxxxxxxxxxxxxxx'

以vue为例进行配置使用

// vue.config.js
 configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        '@子项目': resolve('子项目')
      }
    }

公共页面/模块的巧妙使用（一）

背景