vue项目打包产物之archiver压缩打包zip文件

archiver是一个在nodejs中能跨平台实现打包功能的模块,通过 stream 的方式,可以打ziptar包。api文档

1. 安装

js 复制代码
npm install archiver -D

如果没有安装cross-env也需要安装

js 复制代码
npm install cross-env -D

安装dayjs插件

js 复制代码
npm install dayjs -D

2. 新增配置文件

在根目录下新增 archiver.config.js配置文件,内容如下:

js 复制代码
/**
 * @description
 * 快速导出压缩包 需要安装依赖 npm install archiver -D
 * 这个库的文档地址 https://github.com/archiverjs/node-archiver
 * 可以在 package.json 中配置 script 命令 npm run build 之后直接 进行 导出 zip 压缩包
 * @example  将需要导出的目录添加到target数组中 命令行执行 node export-zip.js 即可
 */
const fs = require("fs");
const path = require("path");
const archiver = require("archiver");
const dayjs = require("dayjs");

// 是否是生产环境
const isProduction = process.env.VUE_APP_NODE_ENV === "production";
// 拼接路径
const resolve = (...dirs) => path.resolve(__dirname, ...dirs);
// 新建路径
const createDir = (path) => {
  const pathArr = path.split("/");
  let i = 0;
  while (pathArr[i]) {
    const currentPath = resolve(...pathArr.slice(0, i + 1));
    const isExits = fs.existsSync(currentPath);
    i++;
    if (isExits) {
      continue;
    }
    fs.mkdirSync(currentPath);
  }
};

//配置要打包的路径列表,需要打包某些目录,添加到数组里面即可 相对路径
const target = isProduction ? ["dist/"] : ["dist/"];

const outputDir =
  "zip/" +
  process.env.VUE_APP_NODE_ENV +
  "/" +
  dayjs().format("YYYY-MM-DD") +
  "/" +
  dayjs().format("HH-mm-ss");

const outputName = "dist_" + dayjs().unix() + ".zip";

// 创建路径
createDir(outputDir);

// 默认在当前目录路径生成此文件 dist.zip
const outputFullName = resolve(outputDir, outputName);
const output = fs.createWriteStream(outputFullName);
const archive = archiver("zip", {
  zlib: { level: 9 } // 设置压缩级别
});

archive.on("error", function (err) {
  console.log("error: ", err);
  throw err;
});

output.on("close", function () {
  console.log(`
      --------- ---------压缩完毕--------- ---------
      生成文件大小${(archive.pointer() / 1024 / 1024).toFixed(1)}MB
      请在当前项目路径下寻找 dist.zip 文件,系统路径为 ${outputFullName}
      ---------如需配置生成路径或文件名,请配置output---------
      `);
});

archive.pipe(output);
for (i of target) {
  archive.directory(i, false);
}
archive.finalize();

配置后打包的产物是在根目录下新增了是 zip文件夹:

注意:vue.config.js文件中配置的打包输出文件名(默认dist)需要与 archiver.config.js配置的输出文件名保持一致。 如果不一致,则需要更改。

3. 打包命令配置

package.json文件里配置

json 复制代码
"scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve --mode development",
    "build:test": "vue-cli-service build --mode test && cross-env VUE_APP_NODE_ENV=development npm run zip",
    "build:prod": "vue-cli-service build --mode production && cross-env VUE_APP_NODE_ENV=production npm run zip",
    "lint": "vue-cli-service lint",
    "zip": "node archiver.config.js"
},

4. 打包产物

执行npm run build:test,可打包测试环境代码

新增的压缩文件如下:

  • 测试环境:

  • 生产环境:

相关推荐
Myli_ing19 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维36 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five2 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript