前端 npm run build打包 dist并压缩成 zip

umijs filemanager-webpack-plugin

config.defaut.ts

  1. // yarn add filemanager-webpack-plugin --dev
  3. import { defineConfig } from 'umi';
  4. import filemanagerWebpackPlugin from 'filemanager-webpack-plugin'
  6. const { REACT_APP_ENV, UMI_ENV } = process.env;
  8. export default defineConfig({
  9.   chainWebpack(config, { webpack }) {
  10.     // 本地启动不使用此插件
  11.     if (UMI_ENV === 'dev') return;
  12.     config.plugin('filemanager-webpack-plugin').use(filemanagerWebpackPlugin, [
  13.       {
  14.         onEnd: {
  15.           delete: ['./dist.zip'],
  16.           archive: [
  17.             {
  18.               source: './dist',
  19.               destination: './dist.zip',
  20.             },
  21.           ],
  22.         },
  23.       },
  24.     ]);
  25.   },
  26. })
  29. // speed-measure-webpack-plugin' // 打包速度分析插件
  30. //
  31. new FileManagerPlugin({
  32.   events: {
  33.     onEnd: {
  34.       delete: [ './dist.zip'],
  35.       archive: [{ source: './dist', destination: './dist.zip' }]
  36.     }
  37.   }
  38. })

https://chinabigpan.github.io/webpack-plugins-docs-cn/routes/webpack-file-manager-plugin.html

Archiver

https://www.archiverjs.com/docs/archiver
https://www.archiverjs.com/docs/quickstart

build-zip.js

  1. // yarn add archiver
  2. const fs = require('fs');
  3. const archiver = require('archiver');
  4. const pag = require('./package.json')
  6. const buildPath = 'build';
  7. const targets = ['dist']
  8. // __dirname 当前目录路径
  9. const outputPath = `${__dirname}/${pkg.name}.zip`
  11. // create a file to stream archive data to
  12. // 输出路径
  13. const output = fs.createWriteStream(outputPath);
  15. output.on('close', function () {
  16.   console.info(`
  17.   --------- 压缩完毕 ---------
  18.    zip文件大小: ${(archive.pointer() / 1024 / 1024).toFixed(1)} MB
  19.    请在当前项目路径下寻找 ${pkg.name}.zip 文件，系统路径为 ${outputPath}
  20.   --------- 如需配置生成路径或文件名,请配置output ---------
  21.    `);
  22. });
  24. output.on('end', function() {
  25.   console.log('Data has been drained');
  26. });
  28. // 压缩配置
  29. const archive = archiver('zip', {
  30.   zlib: { level: 9 } // Sets the compression level 压缩级别
  31. });
  33. archive.on('error', function (err) {
  34.     throw err;
  35. });
  37. archive.pipe(output);
  39. archive.directory(`${__dirname}/${buildPath}/`, pkg.name);
  40. // for (i of targets) { archive.directory(i, i) }
  42. archive.finalize();

fs 这个内置库用来读取文件和写入文件，通过 fs提供的 createWriteStream的方法生成zip压缩包
定义变量 homedir获取当前项目的路径，
定义变量一个数组变量 target，表示需要打包的路径列表，需要打包哪些目录，添加其相对路径到数组里即可

scripts

  1. {
  2.   "dev": "vue-cli-service serve",
  3.   "build": "vue-cli-service build --mode production",
  4.   "clean": "rimraf dist.zip",
  5.   "zip": "node build-zip.js",
  6.   "deploy": "npm run build && npm run clean && npm run zip"
  7. }
  • npm run build 可以打包我们的项目生成默认 dist 文件
  • npm run clean 可以删除项目已有的 dist.zip 文件
  • npm run zip 可以执行 node build-zip.js 命令，生成 zip 文件
  • npm run deploy 命令，将 npm run build 、 npm run clean 、 npm run zip 三个命令串行执行
    • && 表示上一个命令执行完了才会接着执行下一个命令
    • 单个的 & 则表示上一个命令和下一个命令是同时触发的

rimraf 删除文件夹

rimraf https://www.npmjs.com/package/rimraf
前端执行打包命令时每次都会生成一个dist目录存放打包后的文件，生成打包文件之前我们需要先把 dist 目录里的所有文件全部删掉，
除了可以使用 rm -rf /dist/ 命令删除外，还可以使用 rimraf /dist/ 命令
以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除
相当于UNIX 命令 rm -rf

  1. // rimraf <path> [<path> ...]
  3.   "scripts": {
  4.     "build": "rimraf dist && cross-env vite build"
  5.   }

https://juejin.cn/post/7112371366279512101