1. tsup क्या है और इसकी आवश्यकता क्यों है?

tsup एक आधुनिक, तेज़ और उपयोग में आसान बंडलर (bundler) है जो TypeScript के लिए esbuild पर आधारित है। इसका मुख्य काम आपकी TypeScript लाइब्रेरी को एक या अधिक फ़ाइलों में बंडल करना है, जो npm पर पब्लिश करने या अन्य प्रोजेक्ट्स में उपयोग करने के लिए तैयार हों। Webpack या Rollup जैसे जटिल कॉन्फ़िगरेशन के विपरीत, tsup ज़्यादातर मामलों के लिए "ज़ीरो कॉन्फ़िगरेशन" प्रदान करता है।

tsup की आवश्यकता क्यों है? TypeScript में लाइब्रेरी डेवलप करते समय कई समस्याएँ आती हैं: TypeScript को JavaScript में कंपाइल करना, टाइप डिक्लेरेशन (.d.ts) जनरेट करना, कई फ़ाइलों को एक में बंडल करना, और इसे अलग-अलग मॉड्यूल फ़ॉर्मेट (CommonJS, ESM) में करना। tsup एक ही कमांड से ये सारे काम करता है। यह इम्पोर्ट को ऑटोमैटिक हैंडल करता है, कोड को मिनिफ़ाई करता है (वैकल्पिक), source maps जनरेट करता है और tree-shaking को सपोर्ट करता है।

tsup इनके लिए सबसे उपयुक्त है: npm पैकेज बनाना, यूटिलिटी लाइब्रेरीज़, React/Vue कम्पोनेंट्स, API क्लाइंट और ऐसे किसी भी प्रोजेक्ट के लिए जहाँ तेज़ और आसान TypeScript बिल्ड चाहिए। esbuild के उपयोग के कारण, tsup पारंपरिक बंडलर्स से 10-100 गुना तेज़ काम करता है, खासकर बड़े प्रोजेक्ट्स पर।

2. इंस्टॉलेशन

tsup को npm या yarn के माध्यम से dev-डिपेंडेंसी के रूप में इंस्टॉल करें:

# npm
npm install --save-dev tsup

# yarn
yarn add --dev tsup

# pnpm
pnpm add --save-dev tsup

इंस्टॉल करने के बाद, आप tsup को npx के ज़रिए चला सकते हैं या package.json में एक स्क्रिप्ट जोड़ सकते हैं।

3. त्वरित शुरुआत — न्यूनतम कार्यशील उदाहरण

चलिए एक सरल लाइब्रेरी बनाते हैं और इसे tsup से बिल्ड करते हैं।

चरण 1: src/index.ts फ़ाइल बनाएँ:

// src/index.ts
export function greet(name: string): string {
    return `नमस्ते, ${name}! tsup में आपका स्वागत है।`;
}

export function add(a: number, b: number): number {
    return a + b;
}

चरण 2: कॉन्फ़िगरेशन फ़ाइल tsup.config.ts बनाएँ (या कमांड लाइन आर्गुमेंट्स का उपयोग करें):

// tsup.config.ts
import { defineConfig } from 'tsup';

export default defineConfig({
    entry: ['src/index.ts'],        // एंट्री पॉइंट
    format: ['cjs', 'esm'],         // आउटपुट फ़ॉर्मेट
    dts: true,                      // .d.ts फ़ाइलें जनरेट करें
    splitting: false,               // चंक्स में न बाँटें
    sourcemap: true,                // source maps जनरेट करें
    clean: true,                    // बिल्ड से पहले dist फ़ोल्डर साफ़ करें
});

चरण 3: package.json में स्क्रिप्ट जोड़ें:

{
    "scripts": {
        "build": "tsup"
    }
}

चरण 4: बिल्ड चलाएँ:

npm run build

परिणाम dist/ फ़ोल्डर में दिखाई देगा:

dist/
├── index.js          (CommonJS)
├── index.mjs         (ESM)
├── index.d.ts        (टाइप डिक्लेरेशन)
├── index.d.mts       (ESM के लिए डिक्लेरेशन)
└── index.js.map      (source map)

4. मुख्य तरीके/फ़ंक्शन/क्लास

tsup में पारंपरिक अर्थों में क्लास नहीं हैं। मुख्य API defineConfig फ़ंक्शन और कॉन्फ़िगरेशन ऑब्जेक्ट है। आइए 8 मुख्य कॉन्फ़िगरेशन ऑप्शन देखें।

4.1. entry

सिग्नेचर: entry: string | string[] | Record<string, string>

यह आपकी लाइब्रेरी का एंट्री पॉइंट निर्धारित करता है। आप एक या एक से अधिक एंट्री पॉइंट दे सकते हैं।

// एकल एंट्री
entry: ['src/index.ts']

// एकाधिक एंट्री
entry: ['src/index.ts', 'src/cli.ts']

// कस्टम आउटपुट नाम के साथ
entry: {
    main: 'src/index.ts',
    cli: 'src/cli.ts',
}

उपयोग: यह tsup का सबसे ज़रूरी ऑप्शन है। इसके बिना, tsup को पता नहीं चलेगा कि क्या बिल्ड करना है।

4.2. format

सिग्नेचर: format: ('cjs' | 'esm' | 'iife')[]

यह आउटपुट मॉड्यूल फ़ॉर्मेट निर्धारित करता है। आप एक या एक से अधिक फ़ॉर्मेट चुन सकते हैं।

// केवल CommonJS
format: ['cjs']

// CommonJS और ESM दोनों
format: ['cjs', 'esm']

// सभी फ़ॉर्मेट
format: ['cjs', 'esm', 'iife']

उपयोग: अगर आपकी लाइब्रेरी को Node.js और ब्राउज़र दोनों में काम करना है, तो ['cjs', 'esm'] सबसे अच्छा विकल्प है।

4.3. dts

सिग्नेचर: dts: boolean | { entry?: string | string[]; resolve?: boolean }

यह टाइप डिक्लेरेशन फ़ाइलें (.d.ts) जनरेट करता है। TypeScript लाइब्रेरी के लिए यह बहुत ज़रूरी है।

// सरल उपयोग
dts: true

// एडवांस कॉन्फ़िगरेशन
dts: {
    entry: 'src/index.ts',
    resolve: true,
}

उपयोग: हमेशा dts: true सेट करें ताकि आपकी लाइब्रेरी के उपयोगकर्ताओं को टाइप सपोर्ट मिले।

4.4. splitting

सिग्नेचर: splitting: boolean

यह कोड को कई चंक्स (chunks) में बाँटने की अनुमति देता है। डिफ़ॉल्ट रूप से, यह ESM फ़ॉर्मेट के लिए true है।

// कोड स्प्लिटिंग बंद करें
splitting: false

// कोड स्प्लिटिंग चालू करें
splitting: true

उपयोग: लाइब्रेरी के लिए आमतौर पर false रखें, क्योंकि एक फ़ाइल में सब कुछ होना बेहतर है। एप्लिकेशन के लिए true उपयोगी हो सकता है।

4.5. sourcemap

सिग्नेचर: sourcemap: boolean | 'inline' | 'external'

यह source maps जनरेट करता है, जो डीबगिंग में मदद करते हैं।

// एक्सटर्नल source map
sourcemap: true

// इनलाइन source map
sourcemap: 'inline'

// कोई source map नहीं
sourcemap: false

उपयोग: डेवलपमेंट के लिए true और प्रोडक्शन के लिए false या 'inline' उपयोग करें।

4.6. clean

सिग्नेचर: clean: boolean

यह बिल्ड शुरू करने से पहले आउटपुट डायरेक्टरी को साफ़ करता है।

// आउटपुट फ़ोल्डर साफ़ करें
clean: true

// साफ़ न करें
clean: false

उपयोग: हमेशा true सेट करें ताकि पुरानी फ़ाइलें न रहें।

4.7. minify

सिग्नेचर: minify: boolean

यह आउटपुट कोड को मिनिफ़ाई (compress) करता है, जिससे फ़ाइल का साइज़ छोटा हो जाता है।

// कोड मिनिफ़ाई करें
minify: true

// कोड मिनिफ़ाई न करें
minify: false

उपयोग: प्रोडक्शन बिल्ड के लिए true और डेवलपमेंट के लिए false उपयोग करें।

4.8. target

सिग्नेचर: target: string | string[]

यह आउटपुट JavaScript का टार्गेट वर्शन निर्धारित करता है।

// Node.js 18 के लिए
target: 'node18'

// ब्राउज़र के लिए
target: 'es2020'

// एकाधिक टार्गेट
target: ['es2020', 'node18']

उपयोग: अपने टार्गेट एनवायरनमेंट के अनुसार सेट करें। Node.js 18+ के लिए 'node18' और आधुनिक ब्राउज़र के लिए 'es2020' अच्छा विकल्प है।