解放双手，二方库的自动打包发布脚本

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

1. 脚本做了什么

1. 获取打包时间
2. 更新版本号
3. 获取上次代码提交的哈希值
4. 将上述信息写入到 v.json 文件中
5. 执行 webpack 打包
6. 将打包出的库上传到 npm 私服
7. 将操作过程输出到日志

2. 背景

项目中开发了一个二方库，封装对接第三方服务的细节，提供简单易用的 API 提供给 Web前端 使用。 琢磨着把库的打包时间、版本号能直接体现在前端，更方便后续问题定位。

3. 脚本的目的

1. 杜绝无意义的重复操作，腾出时间来掘金摸鱼
2. 将版本信息打包到库中

4. 具体实现

最早是写了一个 bat 的版本，因为 bat 大家接触的少，这里就不多说了。 主要聊聊 node 的版本

其实代码没啥难度，主要是这种渴望摸鱼的心态，希望大家能感同身受。

4.0 前提条件

1. 配置好各种环境： node，git，webpack 等
2. 各种账号提前登录好（git，私服 npm）

4.1 获取当前打包时间

// 1 get current date time
function getCurrentDateTime() {
	return new Promise((resolve, reject) => {
		let date = new Date();
		let dateFormat = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ' ' + date.getMinutes() + ' ' + date.getSeconds();
		resolve(dateFormat);
	})
}

4.2 更新版本号

使用了 npm version patch 来自动更新修订号，当然此方法只能自动更新小版本号。

// 2 auto update the version   eg: 1.0.1 -> 1.0.2
function autoUpdateVersion() {
	return new Promise((resolve, reject) => {
		child.exec('npm version patch', function (err, sto) {
			if (err) {
				reject(err);
				return;
			}
			resolve(sto);
		})
	})
}

• 主版本号(major)：当你做了不兼容的 API 修改

• 次版本号(minor)：当你做了向下兼容的功能性新增（加功能升这个）

• 修订号(patch)：当你做了向下兼容的问题修正（改 bug 升这个）

4.3 获取最近一次提交记录

这里使用 git log 的方法

// 3 get the last commit hashCode by git log
function getLastCommitHashcode() {
	return new Promise((resolve, reject) => {
		child.exec("git log --pretty=format:'%H' -n 1", function (err, sto) {
			if (err) {
				reject(err);
				return;
			}
			console.log(sto)
			resolve(sto);
		})
	})
}

4.4 将信息写入到 v.json 文件中

let result = {
	version: '',
	buildTime: '',
	lastCommit: ''
}
// 4 write to v.json file
const fs = require('fs')
function writeInfo2File() {
	return new Promise((resolve, reject) => {
		const jsonStr = JSON.stringify(result, null, '\t');
		fs.writeFile(outputPath, jsonStr, function (err) {
			if (!err) {
				console.log("write success");
				resolve(jsonStr);
			} else {
				console.error(err);
				reject(err);
			}
		})
	})
}

文件会生成到二方库的项目路径下，二方库导入此文件，在库初始化的时候将信息打印出来。

打印的方法如下，大家可以复制这段代码，然后在 F12 中粘贴，看下效果

var result = {
    "version": "v1.0.88",
	"buildTime": "2022-7-7 16 26 47",
	"lastCommit": "a5bd1ef16f7bdd1704f15027786367515aeadece"
}
// 二方库中打印
console.log('%cMelon%c' + result.version + '%c' + result.buildTime,'color:white;background:#606060;padding:4px 12px;border-radius:3px 0px 0px 3px','background:lightGreen;padding:4px 12px;','color:white;background:#0074af;padding:4px 12px;border-radius:0px 3px 3px 0px')

4.5 webpack 打包

涉及到调用 shell ，使用 child_process

const child = require('child_process');
// 5 webpack
function webpack() {
	return new Promise((resolve, reject) => {
		child.exec('webpack --config webpack.melon-publish.config.js', function (err, sto) {
			if (err) {
				reject(err);
				return;
			}
			resolve(sto);
		})
	})
}

4.6 npm publish 发布

// 6 npm publish
function publish() {
	return new Promise((resolve, reject) => {
    console.log('publish ready')
		child.exec('npm publish --registry http://npm私服地址', function (err, sto) {
			if (err) {
				reject(err);
				return;
			}
			resolve(sto);
		})
	})
}

4.7 日志记录过程

function writeLogFile(){
	return new Promise((resolve, reject) => {
		let filePath = './log/' + result.buildTime + '.log';
		fs.writeFile(filePath, logStr, function (err) {
			if (!err) {
				resolve(logStr);
			} else {
				console.error(err);
				reject(err);
			}
		})
	})
}

5. 收获

其实整个写脚本的过程，除了学一些杂七杂八的知识外，最主要的收获了快乐。

就是那种敲下 npm run pub 之后坐看云起时的悠闲（狗头）

6. 源码

源码地址后面我放到评论里（我怕掘金说我引流。。。）