unbuild TypeScript: पूर्ण गाइड उदाहरणों के साथ

आधुनिक JavaScript और TypeScript इकोसिस्टम में प्रोजेक्ट बिल्ड करना एक महत्वपूर्ण कार्य है। डेवलपर्स को अक्सर Webpack, Rollup या esbuild के लिए जटिल कॉन्फ़िगरेशन सेट करने की आवश्यकता होती है। unbuild लाइब्रेरी एक सुंदर समाधान प्रदान करती है — एक एकीकृत बिल्ड सिस्टम जो सर्वोत्तम प्रथाओं और टूल्स को एक इंटरफ़ेस में जोड़ती है। यह सिर्फ एक और बिल्डर नहीं है, बल्कि esbuild और Rollup के ऊपर एक यूनिफाइड रैपर है जो आपके प्रोजेक्ट के लिए स्वचालित रूप से सबसे अच्छी बिल्ड रणनीति निर्धारित करता है।

unbuild का मुख्य उद्देश्य TypeScript लाइब्रेरीज़ की बिल्ड प्रक्रिया को अधिकतम सरल बनाना है। कॉन्फ़िगरेशन फ़ाइलों को सेट करने में घंटों बिताने के बजाय, डेवलपर को "आउट ऑफ़ द बॉक्स" तैयार समाधान मिलता है। लाइब्रेरी स्वचालित रूप से CommonJS और ESM बिल्ड तैयार करती है, टाइप डिक्लेरेशन (d.ts) बनाती है, बंडल को ऑप्टिमाइज़ करती है और TypeScript की आधुनिक सुविधाओं का समर्थन करती है। यह unbuild को npm पैकेज और open-source प्रोजेक्ट्स के लेखकों के लिए एक आदर्श विकल्प बनाता है।

Unbuild निम्नलिखित परिदृश्यों में विशेष रूप से उपयोगी है: मोनोरेपो बनाना, tree-shaking के साथ लाइब्रेरी बिल्ड करना, TypeScript स्रोतों के साथ पैकेज प्रकाशित करना, पुराने बिल्डरों से माइग्रेट करना। package.json एक्सपोर्ट्स के अंतर्निहित समर्थन और एंट्री पॉइंट्स के स्वचालित निर्धारण के कारण, लाइब्रेरी आपको इंफ्रास्ट्रक्चर सेट करने के बजाय कोड लिखने पर ध्यान केंद्रित करने देती है।

इंस्टॉलेशन

unbuild को इंस्टॉल करने के लिए npm पैकेज मैनेजर (या विकल्प — yarn, pnpm) का उपयोग किया जाता है। लाइब्रेरी को dev-डिपेंडेंसी के रूप में इंस्टॉल किया जाता है:

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"
    }
  }
}