01

案例背景

在項目中，我們經常需要存檔前端每次打包的版本，方便線上快速切換不同版本使用。經過思考，我們可以在打包時，將本次打包結果另存為zip壓縮包，方便后續使用。于是我準備開發一個Webpack插件實現此功能，借助iFlyCode智能編程助手，2分鐘就能完成！

02

開發過程

整理好功能需求描述，發送給iFlyCode：

iFlyCode生成第一個版本的代碼：

// my-webpack-backup-plugin.js

const fs = require('fs');

const path = require('path');

class WebpackBackupPlugin {

??constructor(options?= {}) {

? ??this.backupDir?= options.backupDir || path.join(__dirname, 'backup');

??}

??apply(compiler)?{

? ??compiler.hooks.done.tap('WebpackBackupPlugin',?(stats) => {

? ? ??//?確保備份目錄存在

? ? ??if?(!fs.existsSync(this.backupDir)) {

? ? ? ??fs.mkdirSync(this.backupDir,?{ recursive: true });

? ? ??}

? ? ??//?獲取當前打包輸出的路徑

? ? ??const?outputPath = compiler.options.output.path;

? ? ??//?生成備份文件名，例如：backup-YYYYMMDDHHmmss.zip

? ? ??const?timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);

? ? ??const?backupFileName = `backup-${timestamp}.zip`;

? ? ??const?backupFilePath = path.join(this.backupDir, backupFileName);

? ? ??//?使用系統命令進行壓縮（需要安裝zip工具）

? ? ??const?zipCommand = `zip -r ${backupFilePath} ${outputPath}`;

? ? ??try?{

? ? ? ??require('child_process').execSync(zipCommand);

? ? ? ??console.log(`Backup?created at ${backupFilePath}`);

? ? ??}?catch (error) {

? ? ? ??console.error('Failed?to create backup:', error);

? ? ??}

? ??});

??}

}

module.exports = WebpackBackupPlugin;

iFlyCode會告訴我如何使用此插件：

上面注意事項中，iFlyCode已經提示我需要安裝zip工具，由于我是windows操作系統，我準備先不安裝，直接將生成的插件放到項目里測試，這時候會報錯（提示我zip工具不可用）：

我將問題告訴iFlyCode，并讓它給我解決方案:

iFlyCode提供一種解決方案，并重新生成了插件代碼：

// my-webpack-backup-plugin.js

const fs = require('fs');

const path = require('path');

const archiver = require('archiver');

class WebpackBackupPlugin {

??constructor(options?= {}) {

? ??this.backupDir?= options.backupDir || path.join(__dirname, 'backup');

??}

??apply(compiler)?{

? ??compiler.hooks.done.tap('WebpackBackupPlugin',?(stats) => {

? ? ??//?確保備份目錄存在

? ? ??if?(!fs.existsSync(this.backupDir)) {

? ? ? ??fs.mkdirSync(this.backupDir,?{ recursive: true });

? ? ??}

? ? ??//?獲取當前打包輸出的路徑

? ? ??const?outputPath = compiler.options.output.path;

? ? ??//?生成備份文件名，例如：backup-YYYYMMDDHHmmss.zip

? ? ??const?timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);

? ? ??const?backupFileName = `backup-${timestamp}.zip`;

? ? ??const?backupFilePath = path.join(this.backupDir, backupFileName);

? ? ??//?使用archiver進行壓縮

? ? ??const?output = fs.createWriteStream(backupFilePath);

? ? ??const?archive = archiver('zip', {

? ? ? ??zlib:?{ level: 9 }, // 設置壓縮級別

? ? ??});

? ? ??archive.pipe(output);

? ? ??archive.directory(outputPath,?false); // 將輸出目錄添加到壓縮包中

? ? ??archive.finalize();

? ? ??archive.on('end',?() => {

? ? ? ??console.log(`Backup?created at ${backupFilePath}`);

? ? ??});

? ? ??archive.on('error',?(err) => {

? ? ? ??console.error('Failed?to create backup:', err);

? ? ??});

? ??});

??}

}

module.exports = WebpackBackupPlugin;

再次將插件放入項目中，并進行測試：

每次打包后，都會將本地打包的內容進行壓縮存檔：

03

總結

整體來看，iFlyCode幫我完成了Webpack插件，每次前端項目打包自動生成版本壓縮包，為項目打包增添版本管理能力，降低了日常工作中的調試難度，進一步提升工作效率。