العمل مع أرشيفات ZIP في TypeScript: دليل كامل لـ JSZip و adm-zip

العمل مع أرشيفات ZIP في TypeScript: نظرة عامة على المكتبات وأمثلة عملية

في تطوير الويب الحديث باستخدام TypeScript، غالبًا ما تنشأ الحاجة للعمل مع أرشيفات ZIP: ضغط الملفات على العميل، فك ضغط البيانات المستلمة من الخادم، أو إنشاء هياكل أرشيف معقدة. في هذه المقالة، سنستعرض أشهر مكتبتين — JSZip و adm-zip، وإمكانياتهما، وكتابة الأنواع لـ TypeScript، وسنقدم أمثلة عملية للاستخدام.

1. JSZip — مكتبة متعددة الاستخدامات للمتصفح و Node.js

JSZip هي مكتبة قوية لإنشاء وقراءة وتحرير أرشيفات ZIP، تعمل في كل من المتصفح وبيئة Node.js. وهي تدعم TypeScript بشكل كامل.

التثبيت:

npm install jszipnpm install @types/jszip --save-dev

1.1 إنشاء أرشيف ZIP

import JSZip from 'jszip';

async function createArchive(): Promise<Blob> {  const zip = new JSZip();    // إضافة ملف نصي  zip.file('hello.txt', 'Hello World!');    // إضافة مجلد مع ملف  const folder = zip.folder('images');  folder.file('logo.png', 'base64EncodedImageData...', {base64: true});    // إنشاء الأرشيف (Blob للمتصفح)  const blob = await zip.generateAsync({type: 'blob'});  return blob;}

1.2 قراءة وفك ضغط الأرشيف

async function readArchive(file: File): Promise<void> {  const zip = new JSZip();  const content = await zip.loadAsync(file);    // التكرار عبر جميع الملفات  content.forEach(async (relativePath, zipEntry) => {    if (!zipEntry.dir) {      const data = await zipEntry.async('string');      console.log(`الملف: ${relativePath}, المحتوى: ${data}`);    }  });}

1.3 العمل مع البيانات الوصفية

يتيح JSZip إدارة التواريخ والتعليقات وصلاحيات الوصول:

const zip = new JSZip();zip.file('document.txt', 'Text content', {  date: new Date('2024-01-01'),  comment: 'مستند مهم',  unixPermissions: '644'});

2. adm-zip — بديل خفيف الوزن لـ Node.js

adm-zip هي مكتبة محسّنة للجانب الخادم على Node.js. تعمل بشكل أسرع مع كميات كبيرة من البيانات ولها واجهة برمجة تطبيقات مريحة.

التثبيت:

npm install adm-zipnpm install @types/adm-zip --save-dev

2.1 إنشاء أرشيف

import AdmZip from 'adm-zip';

function createServerArchive(): void {  const zip = new AdmZip();    // إضافة ملف من مخزن مؤقت  zip.addFile('data.json', Buffer.from(JSON.stringify({key: 'value'})));    // إضافة ملف محلي  zip.addLocalFile('/path/to/file.txt');    // إضافة مجلد كامل  zip.addLocalFolder('/path/to/folder', 'custom_folder_name');    // الكتابة على القرص  zip.writeZip('archive.zip');}

2.2 فك الضغط والاستخراج

function extractArchive(): void {  const zip = new AdmZip('./archive.zip');    // استخراج جميع الملفات إلى مجلد  zip.extractAllTo('./extracted', true);    // الحصول على قائمة الإدخالات  const entries = zip.getEntries();  entries.forEach(entry => {    console.log(`الاسم: ${entry.entryName}, الحجم: ${entry.header.size}`);        // الحصول على المحتوى    const content = entry.getData().toString('utf8');  });}

3. مقارنة المكتبات

• JSZip — متعددة الاستخدامات، تعمل في المتصفح و Node.js، تدعم التوليد التدفقي، ولها واجهة برمجة تطبيقات غنية للعمل مع البيانات الوصفية.
• adm-zip — أسرع مع الكميات الكبيرة، واجهة برمجة تطبيقات أبسط، ولكنها تعمل فقط في Node.js.
• الأداء: adm-zip تتفوق عند العمل مع أرشيفات أكبر من 100 ميجابايت.
• كتابة الأنواع: كلاهما لديهما دعم كامل