Quixn

V1

2022/06/23阅读:29主题:绿意

前端build打包dist并压缩成zip最佳实践

前言

作者简介: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的内置库 fsfs 这个内置库用来读取文件和写入文件的,再引入我们刚刚通过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: { level9 } // 设置压缩级别
});

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[1]网站,下载zip-3.0-bin.zip[2]bzip2-1.0.5-bin.zip[3],分别提取压缩包中bzip2.dllzip.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,长期交流学习...

参考资料

[1]

sourceforge: https://sourceforge.net

[2]

zip-3.0-bin.zip: https://sourceforge.net/projects/gnuwin32/files/zip/3.0/

[3]

bzip2-1.0.5-bin.zip: https://sourceforge.net/projects/gnuwin32/files/bzip2/

分类:

前端

标签:

前端

作者介绍

Quixn
V1