先说一下使用场景:当多个项目中用到了公共模块,如何处理这些公共模块呢?举个例子:当前项目中用到了一些组件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可以看到子项目有修改。
这个时候需要先到子项目提交代码,再到主项目提交代码。子项目就是common-component,git push代码提交,不多说了。
看图可以看到,主项目仓库并不会保存子项目的代码。 他保留的是子项目的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安装相关的依赖等。