前言

作者简介：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.zipconst 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文件...... && $RESETelse    zip -r dist.zip dist    $GREEN && echo 开始进行将dist文件打包成zip文件...... && $RESETfizipfilesizekb=$(wc -c "dist.zip" | awk '{print $1}')zipfilesizemb=$(du -sh dist.zip | awk '{print $1}')$GREEN && echo 打包胜利,文件大小为:$zipfilesizemb,$zipfilesizekb KB && $RESETecho 输入地位为:`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多平台公布