如何处理公共模块--对比npm和git submodule

时间:2024-04-12 10:49:47

先说一下使用场景:当多个项目中用到了公共模块,如何处理这些公共模块呢?举个例子:当前项目中用到了一些组件Loading、Input啊,一些公共组件,并不想写在项目本身,而是抽出来可以为多个项目所复用。
本文主要对比以下两种方式:
1. 把公共组件写成一个npm包,使用时npm install安装即可
2. 公共组件单独写成一个项目,使用时用git submodule引入到主项目中

下面比较这两种方式的异同(下面假定公共组件库项目名为common-component)

添加一个新的公共组件库

git submodule npm
git submodule add <仓库地址> <本地路径> npm install –save-dev
  • 仓库地址是指公共组件库的git地址,本地路径是指最终要克隆到哪个目录下,如果省略则默认当前项目的根目录下面。这里要注意的一点是,这个本地路径是本地的绝对路径,(可以在vscode直接右键复制路径)。而且该路径不能是当前项目的已有目录。

  • 相比之下npm这种方式就很简单了,直接npm install,就可以在项目中使用了。

修改公共组件库

  • 先来说git submodule 。
    自己本地修改了公共组件库,也就是当前项目的子项目。这时,git status可以看到子项目有修改。
    如何处理公共模块--对比npm和git submodule
    这个时候需要先到子项目提交代码,再到主项目提交代码。子项目就是common-component,git push代码提交,不多说了。
    如何处理公共模块--对比npm和git submodule
    看图可以看到,主项目仓库并不会保存子项目的代码。 他保留的是子项目的commit id,来唯一标识子项目的每一次提交。

  • npm相比较也是很简单了,如果要更新组件库,也就是要去更新这个npm包,主项目要更新直接npm install 再安装一次就会下载到最新版本的包。

克隆一个新项目(带有公共组件库)

  • 项目克隆下来之后并不会直接带有全部的common-component的代码,只有这个common-component空文件夹和.gitmodules文件(用于记录子模块的路径以及远程版本库地址)。这个时候再把common-component的内容下载下来。主项目和子项目都记得切分支。
    git submodule update --init --recursive

  • 克隆一个项目,如果他引入了其他的npm包的话,npm install的时候都会安装下来。当然,如果他安装这个npm包的时候没有—save或者—save-dev的话,你克隆下来,也需要再次npm install 才可以。

更新项目

  • 公共组件被修改时更新项目
    git submodule foreach git pull

  • npm的话,npm install一下,就可以安装到最新的版本。

删除组件库

  • git rm --cached common-component
    rm -rf common-component
    rm .gitmodules

  • common-component是npm包的话,执行命令
    npm uninstall common-component
    npm uninstall common-component --save-dev(--save) 不仅会删掉npm包,也会从package.json中删掉包的信息。

    以上就是关于使用npm和git submodule一些基本操作的对比。显然,使用npm包的这种方式更简单。而且写一个npm package发布上去,不仅自己可以用,也可以使更多的开发者受益。当然,git submodule可以让自己组件库私有,并且组件库写起来很简单,一个react组件就可以了。不像npm包还要打包,设置package.json安装相关的依赖等。