【iconfont 阿里图标库】在项目中下载图标库的自动化脚本

本文将介绍如何通过执行脚本一步完成 iconfont 图标库下载、解压、移动到目标目录等步骤。

• 仅执行一个 JS 脚本即可；
• 脚本兼容 windows、MacOS、Linux等系统；
• 可配置多个图标库下载；
• 利用 cookie 从 iconfont.cn 下载用户的图标库，目前 iconfont.cn cookie 过期时间为一年，所以不需要经常去更新 cookie。

依赖包介绍

• fs-extra： 是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API；
• shelljs：是 Unix Shell 在 NodeJS API 层的轻量级实现，兼顾 windows；
• axios：一个基于 Promise 的 HTTP 库，可以用在浏览器和 NodeJS 中；
• extract-zip：用于解压 ZIP 压缩包；
• chalk：终端颜色输出插件。

编写自动化脚本

新建 js 脚本文件 build/iconfont.js，内容如下：

const path = require('path')
const fse = require('fs-extra')
const shelljs = require('shelljs')
const axios = require('axios')
const extract = require('extract-zip')
const chalk = require('chalk')

// 项目版本号，用于生成带版本号的 iconfont 图标库
const version = '1.2.3'

// 假设你有一个本地配置文件（不加入 git 版本控制中，因为敏感信息只保存到开发机）
const localConfig = {
	iconfont: {
		cookie: '...'  // 登录 iconfont.cn 后的 cookie
	}
}

// 一个或多个图标库
let objects = [
	// name: 目录名称标识, url: 图标库下载地址。类似于：https://www.iconfont.cn/api/project/download.zip?pid=...&ctoken=...
	{name: 'iconfont', url: '...'}
]

let progress = 0  // 多个图标库时记录进度

main()

async function main() {
	for(let i = 0; i < objects.length; i++) {
		await processor(objects[i])
	}
}

// 图标库处理程序
function processor(object) {
	return new Promise(resolve => {
		// 确保存在目标输出目录
		fse.ensureDirSync(path.resolve(process.cwd(), 'output'))

		let downloadFilename = `${object.name}.zip`
		let zipFilepath = path.resolve(process.cwd(), 'output', downloadFilename)
		let targetDir = path.resolve(process.cwd(), `output/${object.name}-${version}`)

		axios.get(object.url + `&_t=${Date.now()}`, {
			responseType: 'stream',
			headers: {
				cookie: localConfig.iconfont.cookie
			}
		}).then(res => {
			if(/^2/.test(res.status)) {
				res.data.pipe(fse.createWriteStream(zipFilepath))

				res.data.on('end', async () => {
					if(fse.existsSync(zipFilepath)) {
						shelljs.rm('-rf', path.resolve(process.cwd(), `output/${object.name}-*`))

						try {
							await extract(zipFilepath, {dir: process.cwd()})
							shelljs.mv(`${process.cwd()}/font_**`, targetDir)
							shelljs.rm('-f', zipFilepath)
							progress++
							console.log(chalk.green(`${object.name} 图标库已下载，当前进度: ${progress}/${objects.length}`))

							resolve()
						} catch (err) {
							throw err
						}
					} else {
						console.log(chalk.yellow(`找不到下载文件: \`${zipFilepath}\`.`))
					}
				})
			} else {
				console.log(chalk.yellow(`iconfont 资源包下载失败.`))
			}
		}).catch(err => {
			throw err
		})
	})
}

在项目中使用自动化脚本

package.jsonscripts中增加如下内容：

"scripts": {
	"iconfont": "node build/iconfont.js"
}

登录 iconfont.cn 后，从 iconfont.cn 复制 cookie，在本地配置文件中将 cookie 添加进去：（安全警告⚠️，不要将 cookie 分享给任何人）

命令行 cd到项目根目录，执行 npm run iconfont即可完成图标库自动下载解压到目标目录中：