写个node小脚本,配置vue或者react项目打包 文件名 不用手动去压缩

我觉得吧 vue打包的 dist文件夹。我想起个名字 自动帮忙压缩下 该多好

node确实有这样的插件,这里引用了两个插件

npm i shelljs archiver --save

然后创建一个shell.js。与package.json 文件同一级别目录下
我这里创建一个 my-porject的压缩文件名字

const shell = require('shelljs')
const fs = require('fs');
const archiver = require('archiver');
// 文件存在就删除
fs.existsSync('./my-project') && deleteall('./my-project')
// vite中可能有点不太一样 不支持cjs写法  1 用下面的这个写法  2 是将shell的后缀名改成  shell.cjs 指定commonjs的方法运行
import shell from "shelljs"
import fs from "fs"
import archiver from "archiver"
import path from "path"
import { fileURLToPath } from "url"
const filename =  fileURLToPath(import.meta.url)
const __dirname = path.dirname(filename)
// 复制文件
let res = shell.cp('-R', 'dist/', 'my-project/')  
// 文件复制成功
if(res.code == 0) {
    const archive = archiver('zip', {
        zlib: { level: 9 } // 设置压缩级别
    });
    const output = fs.createWriteStream(__dirname + "/my-project.zip")
    archive.on('error', function (err) {
        throw err;
    });
    
    output.on('close', function () {
        console.log('======打包完成========直接将压缩包 my-project传给服务器端部署即可=, 在当前文件夹中进行查看')
        deleteall('./my-project')  // 删除文件夹
        deleteall('./dist')
    });
    archive.pipe(output)
    archive.directory('my-project/');
    archive.finalize();
}




//删除文件
function deleteall(path) {
    var files = [];
    if(fs.existsSync(path)) {
        files = fs.readdirSync(path);
        files.forEach(function(file, index) {
            var curPath = path + "/" + file;
            if(fs.statSync(curPath).isDirectory()) { // recurse
                deleteall(curPath);
            } else { // delete file
                fs.unlinkSync(curPath);
            }
        });
        fs.rmdirSync(path);
    }
 };

然后在packjson文件中配置下就行

 "build": "vue-cli-service build && node ./shell.js",

然后运行。 nom run build

项目中 自动有这个压缩包了。然后把这个交给运维就行(哪来的运维还是自己拿到服务器部署吧 哎太难了)

关注我 持续更新前端知识。

其实吧。上面的还是不太友好 能不能我手动输入他就打包我输入的那个名字作为文件夹名字其实也是可以的但这个就交给大家了,虽然我这快也写了,就不贴在这里,这里只是起一个抛砖引玉的效果