前端 子模块化 git submodule 实现npm install 、 npm run build 一键执行

522 阅读1分钟

npm build 打包三个项目

当我们的项目有子模块,且每个子模块都是一个单独的前端项目时。
image.png
我们希望像往常一样:
1.执行一次npm install就可以安装三个项目的依赖
2.执行一次npm run build就可以打包三个项目

image.png
首先是上边的workspaces,这个地方我们需要把我们的子模块路径放进去。
这个路径是相对于我们项目的根路径的。
这样做的目的是什么呢?

这样当我们需要执行某个workspace下的某个命令时
我们就可以通过npm run build --workspace=xxx
这里的xxx就是我们定义的workspace

然后我们在执行build的时候就可以加这样一行命令进去

image.png 代表的就是我们先执行
npm run build --workspace=barcode-scanner --workspace=sunmi-printer
然后再执行
cross-env NODE_ENV=TTTT_pro vue-cli-service build

这里我们需要注意: 两个命令之间我们可以用 & 和 && 连接
这里我们用的是&&,而它的作用是等待前边的命令执行完毕再执行后边的命令。
因为在我们这个项目需求里,后边的build,是需要前边两个workspace的build执行完毕再执行的。

这样我们就实现了一键build三个项目啦

npm install 安装三个项目依赖

这里我们需要在我们的主项目依赖中,加入我们子项目的依赖:

"dependencies": {
    "barcode-scanner-plugin": "file:./barcode-scanner",
    "sunmi-printer": "file:./sunmi-printer",
}

这样的话,我们再执行npm install,就会一并安装这两个子项目的依赖。