前言作者简介：Quixn，专注于Node.js。全栈指南】作者，Github博客开源项目github.com/Quixn...大家好，我是Quixn。在前端项目中，在CI/CD流行之前，项目的部署和上线往往需要经过这些步骤：项目用npmrunbuild打包，然后用工具打包成zip上传到服务器。文章推荐两种方法实现第一步和第二步的Merge。当然！！！自动化CI/CD是最后一个选项。1.使用node插件archiver压缩生成zip文件官网https://archiverjs.comGitHubhttps://github.com/archiverjs1教程1.1安装依赖npminstallarchiver-D1.2新建export-zip项目根目录下的.js文件在该目录下新建一个export-zip.js文件，在该文件中输入后面的代码。1.3基于archiver的完整代码实现首先介绍node内置的库fs，用于读写文件，然后介绍我们刚刚通过npm下载的依赖archiver。定义变量homedir获取当前项目的路径，定义一个数组变量target表示需要打包的路径列表，哪些目录需要打包，将它们的相对路径添加到数组中。通过fs提供的createWriteStream方法生成zip压缩包。archiver实例中的zlib属性可以设置压缩级别。在fsexport的最后，有一个close方法，可以让我们控制输出一些我们想要的内容。/***@authorQuixn*@description*压缩包快速导出需要安装npminstallarchiver-D*本库文档地址https://github.com/archiverjs/node-archiver*可以在包中配置.json脚本命令npmrunbuild后，直接导出zip压缩包*@example将要导出的目录添加到目标数组中，在命令行执行nodeexport-zip.js*@version20220622*/constfs=require('fs');constarchiver=require('archiver');consthomedir=__dirname;//这里是当前目录路径//consttimeString=newDate().toLocaleDateString().replace(/\//G，'-'）;//日期作为hash值，防止覆盖之前的压缩包//配置要打包的路径列表，部分目录需要打包，添加到相对路径的数组中consttarget=['dist']//默认在当前目录路径下生成这个文件dist.zipconstoutput=fs.createWriteStream(homedir+'/dist.zip');constarchive=archiver('zip',{zlib:{level:9}//设置压缩级别});存档。on('error',function(err){throwerr;});output.on('close',function(){console.log(`------------------Compressed------------------生成的文件大小${(archive.pointer()/1024/1024).toFixed(1)}MB请输入当前项目路径找到dist.zip文件，系统路径为${homedir}\\dist.zip---------如需配置生成路径或文件名，请配置output--------`);});archive.pipe(output);for(ioftarget){archive.directory(i,i)}archive.finalize();1.4配置scripts命令，实现build自动压缩成功。在项目package.json中配置如下命令："scripts":{"dev":"vue-cli-serviceserve","serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild--modeproduction","lint":"vue-cli-servicelint","clean":"rimrafdist.zip","zip":"nodeexport-zip.js","deploy":"npmrunbuild&&npmrunclean&&npmrunzip"}，执行npmrunbuild打包我们的项目生成一个默认的dist文件，执行npmrunclean可以删除项目已有的dist.zip文件。执行npmrunzip执行nodeexport-zip.js命令生成zip文件。所以，只要配置一个deploy命令，分别运行npmrunbuild、npmrunclean、npmrunzip这三个命令是可以串行执行的，命令之间可以用&&连接&&表示下一个命令会在上一个命令之后执行被执行。而如果使用单个&，则表示同时触发上一条命令和下一条命令。这样配置之后，我们只需要执行一条命令npmrundeploy就可以完成打包，生成dist.zip文件。二、bash下使用zip-r压缩生成zip文件1教程1.1安装zip命令需要的二进制文件必要环境条件：1.git环境2.zip命令可以在gitbash环境下执行3.使用gitbash命令行中断集成到vscode中（非必须，方便开发，集成方法百度直接有）gitbash默认不识别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-rdist.zipdist首先判断dist.zip文件是否存在，存在则执行rm-rfdist.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[-edist.zip];然后$RED&&echo开始删除现有的dist.zip文件..........&&$RESETrm-rfdist.zip$YELLOW&&echo已被删除.....&&$RESETzip-rdist.zipdist$GREEN&&echo开始将dist文件打包成zip文件...&&$RESETelsezip-rdist.zipdist$GREEN&&echo开始将dist文件打包成zip文件...&&$RESETfizipfilesizekb=$(wc-c"dist.zip"|awk'{print$1}')zipfilesizemb=$(du-shdist.zip|awk'{print$1}')$GREEN&&echo打包成功，文件大小为：$zipfilesizemb,$zipfilesizekbKB&&$RESETecho输出位置是：`pwd`/dist.zip1.4Configurationscripts命令实现构建成功自动压缩。在项目package.json中配置如下命令："scripts":{"dev":"vue-cli-serviceserve","serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild--modeproduction","lint":"vue-cli-servicelint","clean":"rimrafdist.zip","zip":"nodeexport-zip.js","deploy":"npmrunbuild&&npmrunclean&&npmrunzip","shell-build":"npmrunbuild&&shbuild.sh"}，这样配置完成后，我们只需要打开gitbash命令行终端，执行一条命令npmrunshell-build即可完成打包，生成dist.zip文件3至此，我们使用了两种方式前端项目搭建和自动压缩成zip文件的实践告一段落，文章推荐两种实现该功能的方式，各有优缺点。使用node插件archiver压缩和generatezipfiles会在项目本身添加archiver插件，使项目变大，在bash下使用zip-r压缩生成zip文件，不会给项目增加额外的依赖，但是依赖gitbash环境，但是把build.sh文件迁移到同环境下的其他文件项目的使用方便多了，欢迎关注，公众号回复【前端构建压缩dist压缩成zip的最佳实践】]得到所有的文章的源代码。关于我&Node交流群大家好，我是Quixn，专注于Node。js技术栈分享，前端从JavaScript到Node.js，再到后端数据库，优质文章推荐。如果你有兴趣学习Node.js（以下计划也可以），可以关注我，加我微信[Quixn1314]，拉你进交流群一起交流学习共建，或者关注公众号【小Q全栈攻略】。Github博客开源项目github.com/Quixn...欢迎加我微信【Quixn1314】，拉你进Node.js进阶进阶群，一起学习Node，长期交流学习...
