unbuild لـ TypeScript: دليل شامل مع أمثلة

في بيئة JavaScript و TypeScript الحديثة، تُعد عملية بناء المشاريع من المهام الأساسية. غالبًا ما يواجه المطورون الحاجة إلى إعداد تكوينات معقدة لأدوات مثل Webpack أو Rollup أو esbuild. تقدم مكتبة unbuild حلاً أنيقًا - نظام بناء موحد يجمع أفضل الممارسات والأدوات في واجهة واحدة. إنها ليست مجرد أداة بناء أخرى، بل هي غلاف موحد فوق esbuild و Rollup، يحدد تلقائيًا استراتيجية البناء المثلى لمشروعك.

الهدف الرئيسي لـ unbuild هو تبسيط عملية بناء مكتبات TypeScript إلى أقصى حد. بدلاً من قضاء ساعات في ضبط ملفات التكوين، يحصل المطور على حل جاهز "من الصندوق". تقوم المكتبة تلقائيًا بإنشاء بنيات CommonJS و ESM، وتوليد تعريفات الأنواع (d.ts)، وتحسين الحزم، ودعم الميزات الحديثة لـ TypeScript. وهذا يجعل unbuild الخيار الأمثل لمؤلفي حزم npm ومشاريع المصادر المفتوحة.

تكون unbuild مفيدة بشكل خاص في السيناريوهات التالية: إنشاء المستودعات المتعددة (monorepos)، بناء مكتبات تدعم tree-shaking، نشر الحزم مع كود TypeScript المصدر، والترحيل من أدوات البناء القديمة. بفضل الدعم المدمج لتصديرات package.json والتحديد التلقائي لنقاط الدخول، تتيح المكتبة التركيز على كتابة الكود بدلاً من إعداد البنية التحتية.

التثبيت

لتثبيت unbuild، يُستخدم مدير الحزم npm (أو البدائل: yarn, pnpm). يتم تثبيت المكتبة كتبعية تطوير (dev-dependency):

npm install -D unbuild

أو باستخدام yarn:

yarn add -D unbuild

لـ pnpm:

pnpm add -D unbuild

بعد التثبيت، يُوصى بإضافة سكريبت البناء في package.json:

{
  "scripts": {
    "build": "unbuild",
    "dev": "unbuild --watch"
  }
}

البدء السريع

لننشئ مشروعًا عمليًا صغيرًا. هيكل الملفات:

my-library/
├── src/
│   └── index.ts
├── package.json
└── tsconfig.json

محتوى src/index.ts:

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

export const version = '1.0.0';

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "declaration": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

الآن لنشغل عملية البناء:

npx unbuild

بعد التنفيذ، ستظهر الملفات التالية في مجلد dist:

dist/index.mjs — بنية ESM
dist/index.cjs — بنية CommonJS
dist/index.d.ts — تعريفات الأنواع
dist/index.d.mts — تعريفات لـ ESM

تقوم unbuild تلقائيًا بإنشاء كلتا البنيتين وتوليد تعريفات TypeScript. لإعداد التصديرات في package.json، أضف:

{
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  }
}