做Google 扩展程序的时候,采用webpack 进行文件编译开发。在项目打包完之后需要将 dist 目录下的文件打包成 zip包。
实现思路
- npm script 钩子 实现任务自动执行
- node ./zip.js 脚步 进行 zip 任务开发
- compressing 包实现 文件 zip
npm script 钩子
npm 脚本有pre和post两个钩子。举例来说,build脚本命令的钩子就是prebuild和postbuild。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --config ./webpack.config.ts -w",
"build": "webpack --mode production --config ./webpack.config.ts ",
"postbuild": "node ./zip.js"
},
当执行npm run build 编辑完成后 会自动调用 postbuild 命令 执行 “node ./zip.js” 文件。
compressing
npm包 compressing
npm地址:https://www.npmjs.com/package/compressing
安装
npm install compressing
zip.js 开发
// 插件打包 zip
console.log("进行 zip ----");
const {
zip
} = require("compressing");
const {
resolve
} = require("path");
const fs = require("fs");
const archiver = require('archiver');
// 清空 zip 目录
const zipDirs = fs.readdirSync("./zip");
if (zipDirs && zipDirs.length > 0) {
for (let index = 0; index < zipDirs.length; index++) {
const dir = zipDirs[index];
const dirPath = resolve(__dirname, "zip/" + dir)
console.log("del ===", dirPath);
fs.unlinkSync(dirPath)
}
}
// 读取版本号
const manifestJSon = fs.readFileSync("./dist/manifest.json", "utf-8")
const mainTextObj = JSON.parse(manifestJSon);
// 版本号
const version = mainTextObj.version;
// 配置 zip 文件名
const zipPath = `./zip/release-${new Date().getTime()}-${version}.zip`
zip
.compressDir(resolve("dist/"), zipPath)
.then(compressDone)
.catch(handleError);
// success ~
function compressDone() {
console.log("zip success~~");
console.log("zip 包路径 == ", __dirname + zipPath);
}
function handleError(err) {
console.log(err);
}
打包后的文件 解压出来会有一层 dist 目录。这不是我想要的结果。我希望是将dist 中的内容压缩成一个zip 包。