基于bat的前端发布流程设计与实现中的一个优化折腾

背景

前面基于bat脚本的前端发布流程设计与实现，我已经介绍了设计与实现，本文主要是为了一个优化折腾（分两步，第一步先做，第二步做第二步是想怎么优化），我主要做了以下几件事。

下面是一个项目的例子，重点是我是如何一步步折腾的。

archiver包实现文件打包

这里你问我为什么已经实现了bat脚本结合vbs脚本的文件压缩，还需要再做一套？我很难回答为什么，就为了玩wow，学编程和技术，爱折腾，我同时是jser和tser，想到用npm来构建也是情理之中。

我主要使用一个叫做归档器的库。它的官网是我已经注释了代码的一些细节，这里就不过多介绍了。我的大致思路是，文件建好后，定义如下要打包的目录，然后打包成${项目名}-dist-${time}.zip的格式。这里需要注意的是，当月份小于10的时候，下面代码的输出是M而不是MM，这本身就是为了做一个logo。要抹平这部分的差异，无非就是多写几个字。我在这件事上没有强迫症，所以没有理顺。

const fs = require('fs')
const path = require('path')
const archiver = require('archiver')
// 项目的文件目录
const baseDir = path.join(__dirname, '../')
// 格式化当前时间，这里需要注意如果月份小于10的话是M而不是MM输出，仅做个发版标记，那就没必要强迫症对齐YYYY-MM-DD hh:mm:ss
const [foo, bar] = new Date().toLocaleString().split(' ')
const time = `${foo.replaceAll('/', '')}${bar.replaceAll(':', '')}`
// 这里用数组，是因为如果你还想打包其他的文件目录或者文件，就放到这个数组里
const target = ['dist']
// 打包输出*-dist-*.zip
const output = fs.createWriteStream(`${baseDir}/app-dist-${time}.zip`)

const archive = archiver('zip', {
  zlib: { level: 9 }
})
// 打包错误处理
archive.on('error', (err) => {
  throw err
})
// 完结撒花，输出文件路径，文件大小
output.on('close', () => {
  console.log(`生成打包文件成功，大小为${(archive.pointer() / 1024 / 1024).toFixed(1)}MB,系统路径在 ${baseDir}app-dist-${time}.zip`)
})
archive.pipe(output)
// eslint-disable-next-line no-restricted-syntax
for (const item of target) {
  archive.directory(item, item)
}
archive.finalize()

值得一提的是，之前我们都是打包到对应的子目录下的，所以得查几遍，优化一下，直接打包后放到根目录下

关于构建脚本的粒度

在软件工程中，有句话说，要想做好，就不能写得乱七八糟。您应该考虑每个模块的作用。模块的职责应该是单一的，并且应该易于维护。 , 考虑到这些方面，我们重构了之前写的脚本，分三步，先清理->再构建打包->上传，流程是这样的。

先清理

我上次忘记说清理了，为什么我上次忘记了？在此还要感谢git。打包后发送到linux服务器。是不是可以利用discard change的魔力让打包的文件消失，所以我之前就这么干过。

那我们把打包好的*.zip文件删除，其实很简单

cd %~dp0
del /a/f/q "*.zip" 

如果你想要分层递归 /s 只需添加它。

再次构建并打包

在子项目中

建设没什么好说的，大部分项目 npm run build 都是穿梭的。

打包这里我们分两步走，在子文件的package.json中粘贴如下内容：

...
"scripts": {

  "zip": "node zip.js",
  "build:zip": "npm run build && npm run zip"
}
...

然后新建一个build.bat，内容如下：

call npm run build:zip
exit

这里的调用意思是当楼上的npm命令执行后，再往下走，就会走到出口。写在这里是为了更好的利用cpu进行处理。有可能你的项目很多，但是有一次我在section里启动了一个进程来build，这显然是我的8核CPU有点冤枉。这样做后，我可以通过在父项目下执行构建来同时构建多个项目，构建完成后会自动退出。这不是我小时候看到的。卡通中的影子化身。

父项目中的build.bat脚本如下

cd /D %~dp0NotePBL-app
start call build.bat
cd /D %~dp0NotePBL-biz
start call build.bat
cd /D %~dp0NotePBL-fin
start call build.bat

重新上传

这里上传，为了避免每次都输入密码，建议你参考我之前写的第一篇文章，匹配到ssh，然后就很简单了，随便用哪个包，

cd %~dp0
scp app-*.zip root@这里填对应服务器的地址:这里填写对应服务器的路径
scp biz-*.zip root@这里填对应服务器的地址:这里填写对应服务器的路径
scp fin-*.zip root@这里填对应服务器的地址:这里填写对应服务器的路径

这是最终集成的 deploy.bat

@echo off
setlocal enabledelayedexpansion 
@REM 中电惠融项目构建脚本，Zheng JiangTao(admin@qq.com)
chcp 65001
cls
cd /D %~dp0
echo ==========(∩•̀ω•́)⊃-*⋆中电惠融项目构建脚本⋆*-⊂(•̀ω•́∩)==========
:start
cd %~dp0
call clean.bat
cd /D %~dp0
start /wait call build.bat
cd /D %~dp0

start /wait call upload.bat
echo ========*:ஐ٩(๑´ᵕ`)۶ஐ:*中电惠融项目构建脚本*:ஐ٩(๑´ᵕ`)۶ஐ:*========
:finish
exit /b 

这次不是自动挡，我是手动挡。除了拆分模块，还给相关开发带来了手动启动汽车的感觉，嗯。

FAQ 如果只有一个项目，没有这么多子项目，你有什么好的建议吗？

那我建议你直接npm一个shuttle，具体是这样的。

有一个npm包叫rimraf，地址是，可以删除文件，安装，修改package.json构建脚本

 ...
 "scripts": {
   "clean": "rimraf app-dist-*.zip",
   "zip": "node zip.js",
   "build:cz": "npm run build && npm run clean && npm run zip",
 }
 ...

如果有多个项目，只更改了一个或两个子项目，有什么好的建议吗？

这就是我上面提到的手动阻塞，把对应的build.bat文件和upload.bat文件下不需要的注释掉就好了。

最后

楼下是我之前写的两篇，今天的一篇构成三篇姊妹篇，嗯。