共计 4275 个字符,预计需要花费 11 分钟才能阅读完成。
前言
作者简介:Quixn,专一于 Node.js 技术栈分享,前端从 JavaScript 到 Node.js, 再到后端数据库,优质文章举荐,【小 Q 全栈指南】作者,Github 博客开源我的项目 github.com/Quixn…
大家好,我是 Quixn。
在前端我的项目中,在 CI/CD
没风行之前,我的项目部署上线,常常须要经验这几步:
- 我的项目打包
npm run build
- 而后 用工具 打包成
zip
- 再 上传到
服务器
上
文章举荐 2 种办法实现将第一步和二步合并。
当然!!!自动化 CI/CD
才是最终抉择。
一、应用 node 插件 archiver 进行压缩生成 zip 文件
- 官网 https://archiverjs.com
- GitHub https://github.com/archiverjs
1 应用教程
1.1 装置依赖
npm install archiver -D
1.2 新建 export-zip.js 文件
在我的项目根目录下新建一个 export-zip.js
文件,后续代码都在该文件里输出。
1.3 基于 archiver 残缺代码实现
首先引入 node
的内置库 fs
,fs
这个内置库用来读取文件和写入文件的,再引入咱们刚刚通过npm
下载的依赖archiver
。
定义变量 homedir
获取以后我的项目的门路,定义变量一个数组变量target
,示意须要打包的门路列表,须要打包哪些目录,增加其相对路径到数组里即可。
通过 fs
提供的 createWriteStream
的办法生成 zip 压缩包。
archiver
实例里的 zlib
属性能够设置压缩级别level
。
fs
导出完结有个 close
办法能够让咱们在管制输入一些咱们想要的内容。
/**
* @author Quixn
* @description
* 疾速导出压缩包 须要装置依赖 npm install archiver -D
* 这个库的文档地址 https://github.com/archiverjs/node-archiver
* 能够在 package.json 中配置 script 命令 npm run build 之后间接 进行 导出 zip 压缩包
* @example 将须要导出的目录增加到 target 数组中 命令行执行 node export-zip.js 即可
* @version 20220622
*/
const fs = require('fs');
const archiver = require('archiver');
const homedir = __dirname;// 这里是当前目录门路
//const timeString = new Date().toLocaleDateString().replace(/\//g, '-'); // 日期充当 hash 值避免笼罩之前的压缩包
// 配置要打包的门路列表, 须要打包某些目录,增加到数组外面即可 相对路径
const target = ['dist']
// 默认在当前目录门路生成此文件 dist.zip
const output = fs.createWriteStream(homedir + '/dist.zip');
const archive = archiver('zip', {zlib: { level: 9} // 设置压缩级别
});
archive.on('error', function (err) {throw err;});
output.on('close', function () {
console.log(`
--------- --------- 压缩结束 --------- ---------
生成文件大小 ${(archive.pointer() / 1024 / 1024).toFixed(1)}MB
请在以后我的项目门路下寻找 dist.zip 文件, 零碎门路为 ${homedir}\\dist.zip
--------- 如需配置生成门路或文件名, 请配置 output---------
`);
});
archive.pipe(output);
for (i of target) {archive.directory(i, i) }
archive.finalize();
1.4 配置 scripts 命令实现 build 胜利主动压缩
在我的项目 package.json
里配置如下命令:
"scripts": {
"dev": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint",
"clean": "rimraf dist.zip",
"zip": "node export-zip.js",
"deploy": "npm run build && npm run clean && npm run zip"
},
- 执行
npm run build
能够打包咱们的我的项目生成默认dist
文件 - 执行
npm run clean
能够删除我的项目已有的dist.zip
文件 - 执行
npm run zip
能够执行node export-zip.js
命令,生成 zip 文件
所以,只需再配置一个 deploy
命令,将 npm run build、npm run clean、npm run zip
这三个命令串行执行就能够了,通过 &&
连贯命令即可。&&
示意上一个命令执行完了才会接着执行下一个命令。而如果用的是单个的 &
则示意上一个命令和下一个命令是同时触发的。
这样配置好了之后,咱们只须要执行一个命令 npm run deploy
就能够实现打包并产生 dist.zip
文件了。
二、应用 bash 下的 zip -r 进行压缩生成 zip 文件
1 应用教程
1.1 装置 zip 命令所需的二进制文件
必要的环境条件:
- 1、
git
环境 - 2、
git bash
环境下可执行zip
命令 - 3、将
git bash
命令行中断集成到 vs code(非必须, 集成了不便开发, 集成办法间接百度就有)
git bash 默认无奈辨认 zip 命令,解决方案如下:(
亲测无效
)返回 sourceforge 网站,下载 zip-3.0-bin.zip 和 bzip2-1.0.5-bin.zip, 别离提取压缩包中
bzip2.dll
和zip.exe
复制到git
装置目录下的Git\usr\bin
目录下。
1.2 新建 build.sh 文件
在我的项目根目录下新建一个 build.sh
文件,后续代码都在该文件里输出。
1.3 编写 shell 脚本
外围代码就一行:zip -r dist.zip dist
首先 if 判断是否已存在 dist.zip
文件,存在则执行 rm -rf dist.zip
删除
压缩包,不存在则间接进行压缩操作。压缩胜利产出 dist.zip
文件后,顺便计算压缩包的大小,能够在控制台看到。
打印到控制台的语句能够进行高亮显示,不便咱们晓得具体的状况。
通过 echo -en
能够设置控制台输入语句的色彩等。
残缺代码如下:
#!/bin/sh
# 定义色彩动作, 把 echo - e 也定义到变量中
RED="echo -en \\E[5;31m"
GREEN="echo -en \\E[5;32m"
YELLOW="echo -en \\E[5;33m"
RESET="echo -en \\E[0;39m"
# 判断 dist.zip 目录是不是曾经存在,如果存在先删除,再执行压缩操作,不存在则间接压缩输入文件
if [-e dist.zip];then
$RED && echo 开始删除已有的 dist.zip 文件............. && $RESET
rm -rf dist.zip
$YELLOW && echo 已删除结束..... && $RESET
zip -r dist.zip dist
$GREEN && echo 开始进行将 dist 文件打包成 zip 文件...... && $RESET
else
zip -r dist.zip dist
$GREEN && echo 开始进行将 dist 文件打包成 zip 文件...... && $RESET
fi
zipfilesizekb=$(wc -c "dist.zip" | awk '{print $1}')
zipfilesizemb=$(du -sh dist.zip | awk '{print $1}')
$GREEN && echo 打包胜利, 文件大小为:$zipfilesizemb,$zipfilesizekb KB && $RESET
echo 输入地位为:`pwd`/dist.zip
1.4 配置 scripts 命令实现 build 胜利主动压缩
在我的项目 package.json
里配置如下命令:
"scripts": {
"dev": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint",
"clean": "rimraf dist.zip",
"zip": "node export-zip.js",
"deploy": "npm run build && npm run clean && npm run zip",
"shell-build": "npm run build && sh build.sh"
},
这样配置好了之后,咱们只须要关上 git bash 命令行终端执行一个命令 npm run shell-build
就能够实现打包并产生 dist.zip
文件了。
3 总结
至此,咱们应用两种形式 build
前端我的项目并且实现主动压缩成 zip
文件的实际就告一段落了。文章通过举荐两种形式来实现这一性能,各有优缺点,应用 node
插件 archiver
进行压缩生成 zip
文件形式,会给我的项目自身增加进来 archiver
插件,使得我的项目体积变大。而应用 bash
下的 zip -r
进行压缩生成 zip
文件虽不会给我的项目减少额定的依赖,但却依赖于 git bash
环境,然而 build.sh
文件迁徙给同一环境下的其余我的项目应用则不便得多。
欢送关注,公众号回复【docxtemplater 最接实际
】获取文章的全副源码。
对于我 & Node 交换群
大家好,我是 Quixn,专一于 Node.js 技术栈分享,前端从 JavaScript 到 Node.js, 再到后端数据库,优质文章举荐。如果你对 Node.js 学习感兴趣的话(后续有打算也能够),能够关注我,加我微信【Quixn1314】,拉你进交换群一起交换、学习、共建,或者关注我的公众号【小 Q 全栈指南】。Github 博客开源我的项目 github.com/Quixn…
欢送加我微信【Quixn1314】,拉你 进 Node.js 高级进阶群,一起学 Node,长期交流学习 …
本文由 mdnice 多平台公布