前端压缩文件，压缩后带根文件夹，打包后自动压缩-多个
优化
对zip.js进行了下优化
more-zip多个项目打包
介绍
文件打包，再手动压缩成zip后再发给后端，做了几次后烦了，就找了下样例，打包后直接压缩成zip，再也不用手动压缩了。
拿到样例后，发现要改打包配置，这样岂不是我还要弄环境变量来判断当前打包环境?毕竟我只在本地才需要zip打包
一顿操作后改了好些个文件，很麻烦，于是就对打包的js给拿来出来，不对这个js本来就在项目外，只是我看的样例把它放了进去
zip.js文件介绍
脱离项目而存在，可不用放入打包配置项下
打包后带根文件夹，文件夹名称与zip名称一致
打包后结构，demo为压缩后文件名称
1
2
3
4
| - demo.zip
- demo
- 文件1
- 文件2
|
实现
安装依赖
1
2
3
4
| // 项目内安装
npm install jszip -D
// 全局安装
// npm npm install jszip -g
|
zip.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
const { resolve, join } = require('path')
const fs = require('fs')
const JSZip = require('jszip')
const readDir = function (zip, distributablePath) {
const files = fs.readdirSync(distributablePath)
files.forEach((fileName) => {
const fillPath = join(distributablePath, './', fileName)
const file = fs.statSync(fillPath)
if (file.isDirectory()) {
const dirZip = zip.folder(fileName)
readDir(dirZip, fillPath)
} else {
zip.file(fileName, fs.readFileSync(fillPath))
}
})
}
const removeExistedZip = (distributablePath, filename) => {
const dest = join(distributablePath, './' + filename)
if (fs.existsSync(dest)) {
fs.unlinkSync(dest)
}
}
const compress = (filename = 'shop-admin', output = './dist-pro') => {
console.log(filename)
let fileName = resolve(filename + '.zip')
const zip = new JSZip()
const folder = zip.folder(filename)
const distPath = resolve(output)
console.log('-----------------------------------------------')
console.log(' 需压缩文件路径: \033[32m' + distPath + '\033[0m')
console.log(' 压缩后文件名称: \033[32m' + fileName + '\033[0m')
console.log('-----------------------------------------------')
removeExistedZip(distPath, fileName)
try {
readDir(folder, distPath)
zip
.generateAsync({
type: 'nodebuffer',
compression: 'DEFLATE',
compressionOptions: {
level: 9
}
})
.then((content) => {
const dest = join(fileName)
removeExistedZip(distPath, fileName)
fs.writeFileSync(dest, content)
console.log('\x1b[32m%s\x1b[0m', '压缩成功！')
})
} catch (e) {
const message = e.message
if (message.includes('no such file or directory')) {
console.log('该文件路径不存在: \033[31m' + distPath + '\033[0m')
} else {
console.log(e)
}
}
}
compress()
|
使用
项目内使用 将zip.js 放入项目根目录下,（不放入根目录也行，只需要改下文件执行相对路径即可）
package.json 原本 scripts
1
2
3
4
| "scripts": {
"dev": "vite",
"build:pro": "vite build",
},
|
现在
1
2
3
4
5
6
| "scripts": {
"dev": "vite",
"zip": "node zip.js",
"build:pro": "vite build",
"build:pro-zip": "npm run build:pro && node zip.js"
},
|
quick start 执行命令
1
2
3
4
| // 立即压缩
npm run zip
// 执行文件打包后再进行压缩
npm run build:pro-zip
|
完全脱离项目-多个项目打包
- 新建 build-zip 文件夹
- 初始化项目
npm init -y - 将zip.js 放入项目根目录下
- 目录下新建 more-zip.js 文件
more-zip.js 文件内容
安装依赖，用于查找目标文件，执行命令
more-zip.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
const execute = async ({
targetPath = '',
filename = "./shop-admin",
output = "./shop-admin",
commandCode = "npm run build:pro"
}) => {
const compress = require("./zip.js");
const { resolve } = require("path");
const shell = require("shelljs");
shell.cd(resolve(targetPath));
shell.exec(commandCode);
compress(resolve(filename), resolve(targetPath, output));
};
const moreExecute = async (list) => {
for (let index = 0; index < list.length; index++) {
const element = array[index];
execute(element);
}
};
const array = [
{
targetPath: "F:/project/company/company-project1",
filename: "F:/project/test/myself/build-zip/project1",
output: "./dist-pro",
commandCode: 'npm run build:pro'
},
{
targetPath: "F:/project/company/company-project2",
filename: "F:/project/test/myself/build-zip/company-project2",
output: "./dist-pro",
commandCode: 'npm run build:pro'
},
];
moreExecute(array);
|
使用
根据项目地址修改 array，打开终端
参考
