Write deploy script by zx.js

Published: at 03:03 PM

通过 zx.js 编写 deploy 部署脚本

背景

2022 年 8 月 5 日，谷歌开源了一款工具，受到了大家的欢迎，到目前这个项目已经收获了 37.8k 的 star，很多小伙伴都反馈这款工具很好用。

https://github.com/google/zx

问：什么是 zx.js 呢？

答：用 js 写终端命令，对就是这样了～

介绍

首先你得全局安装一下 zx , 这里有一个 node>=16.0 版本要求。

安装好后，你就可以快乐的开始编写各种脚本了～

比如：

// test.mjs
import { $ } from "zx";

await $`ls`;

执行 test.mjs

node ./test.mjs

$ ls
bootstrap-tool
hello-world
node_modules
package.json
README.md
typescript

所以，到这里你就能理解了，你可以直接通过编写 js 文件，然后就可以按照我们的编写的脚本在终端中执行了。是不是很香？

别急，你甚至可以 await 它，请看：

import { $ } from "zx";

const output = (await $`ls`).stdout;

console.log(output);

这时候 output 的结果将会是

$ ls
hello-world.mjs
node_modules
package.json
package-lock.json
README.md
hello-world.mjs
node_modules
package.json
package-lock.json
README.md

编写部署脚本

整理思路

首先我们需要实现的内容是部署，那么部署我们会经历几个比较重要的环节：

  1. 配置部署环境、node 版本，因为我们本地运行是好的，所以跳过。
  2. 安装依赖，本地已经安装好了依赖，所以也跳过。
  3. 构建
  4. 上传到 CDN
  5. 打 tag
  6. 提交到 GitHub

检测安装 coscmd

然后我们需要确定一个事情，我们上传的 CDN 需要安装一个 SDK，在这里我们采用的是腾讯的 COS，那么需要用到的包就是 coscmd。

首先，我们需要去检测一下用户是否安装了 coscmd，没有的话需要提示他安装。

// 检测是否按照了 coscmd 命令
try {
    await $`coscmd -h`
} catch (error) {
    console.log('请先安装 coscmd 命令')
		// pip
    console.log('pip install coscmd')
    process.exit(1)
}

在这里，如果你没有安装 Python 的话，需要先去安装 Python 不然是没有 pip 命令的，如果你安装的是 Python3 那么你的命令是 pip3.

获取当前项目版本

我们一般情况在发布完成之后都需要去更新一下版本号，在这里我们简单实现一个只更新版本号最后一位的功能。

const { version } = JSON.parse(await $`cat package.json`)
// 生成下一代版本号 1.0.0 => 1.0.1
const nextVersion = version.replace(/(\\d+)$/, (match, p1) => {
    return Number(p1) + 1
})

// 更新版本号 修改 package.json 文件
await $`sed -i '' 's/"version": "${version}"/"version": "${nextVersion}"/g' package.json`

构建

打包我们的项目之前，可以先手动清理一下 dist，当然现在绝大多数的构建工具都支持 build 之前先自动清理 dist，不过我们还是自己去实现一下，因为这个比较简单。

// 清理dist
await $`rm -rf dist`

// 打包
await $`pnpm run build`

执行完之后就可以正常看到最新的 dist 目录了，这时候只需要去通过命令把代码上传到 COS 中就完成了～

上传 CDN

上传 CDN 我们用的是 coscmd ，下面是具体的使用文档：

对象存储 COSCMD 工具-工具指南-文档中心-腾讯云

// 上传到腾讯云 COS 文档：<https://cloud.tencent.com/document/product/436/8629>
await $`coscmd config -a AKI******************lqeD -s KN******************xmLfk -b ws-us-13*******08 -r na-siliconvalley`
// 上传 dist 目录到储存桶的 app/dev 目录下
await $`coscmd upload -r dist/ /app/${process.env.NODE_ENV}`

到这里，我们其实就已经发布到线上了，那么接下来我们就要去做最后一步，打 tag。

打 Tag

// 提交代码 打 tag
await $`git add .`
// 获取用户输入的 commit message
await $`git commit -m "chore: release ${process.env.KD_ENV} ${nextVersion}"`
await $`git tag ${nextVersion}`
// 提交到git附带tag
await $`git push`
await $`git push --tags`

提示

// 发布完成通知
console.log('发布完成，请访问 <https://widgetstore.net/> 查看效果')