टीएलडीआर

आपको esbuild जैसे बंडलर का उपयोग करना होगा जो आपके प्रोजेक्ट को संकलित करेगा और इसके साथ इसकी सभी निर्भरताओं को बंडल करेगा ताकि वे आयात न हों। यह ESM/CommonJS असंगति समस्या को दरकिनार कर देता है।

यदि आप अधीर हैं, तो आप इस उदाहरण कार्यान्वयन के साथ सीधे कोड पर जा सकते हैं।

प्रसंग

सप्ताहांत में अपना नया प्रोजेक्ट टोकन.जेएस जारी करने की तैयारी करते समय, मुझे काफी निराशाजनक समस्या का सामना करना पड़ा। मैं चाहता था कि मेरा पैकेज ईएसएम के अलावा कॉमनजेएस का भी समर्थन करे, लेकिन मेरे पास शुद्ध ईएसएम निर्भरता थी। वहां के शुद्ध ईएसएम योद्धा मेरे ऐसा कहने से काफी नाखुश हो सकते हैं, लेकिन यदि आप एक एनपीएम पैकेज बना रहे हैं और चाहते हैं कि इसका व्यापक रूप से उपयोग किया जाए तो आपको अभी भी 2024 में कॉमनजेएस का समर्थन करने की आवश्यकता है।

टोकन.जेएस एक सरल टाइपस्क्रिप्ट एसडीके है जो आपको 9 विभिन्न प्रदाताओं (ओपनएआई, एंथ्रोपिक, कोहेयर, आदि) से 60 एलएलएम को एकीकृत करने की अनुमति देता है। बेशर्म प्लग, इसे जांचें और मुझे बताएं कि यदि आप जेनरेटिव एआई में रुचि रखते हैं तो आप क्या सोचते हैं।

अब ऑनलाइन कई संसाधन मौजूद हैं जो इस बात पर चर्चा कर रहे हैं कि ईएसएम, कॉमनजेएस या दोनों के लिए जावास्क्रिप्ट प्रोजेक्ट कैसे बनाएं। हालाँकि, मुझे विशेष रूप से इस तथ्य से निपटने में परेशानी हुई कि मेरी निर्भरताएँ शुद्ध ईएसएम थीं। मुझे इससे निपटना काफी कठिन लगा क्योंकि मैं बंडलर्स से परिचित नहीं हूं (मैंने ज्यादातर वेबएप बैकएंड पर काम किया है), और इस विषय पर एक अच्छा मार्गदर्शक नहीं ढूंढ पाया।

इसलिए यदि कोई और इस समस्या से जूझ रहा है, तो इसका समाधान यहां है।

मार्गदर्शक

एस्बिल्ड स्थापित करें

हम बंडलर के लिए esbuild का उपयोग करेंगे।

yarn add esbuild --save-dev

एक बिल्ड स्क्रिप्ट बनाएं

हमें ईएसबिल्ड चलाने और परिणाम आउटपुट करने के लिए एक सरल बिल्ड स्क्रिप्ट की आवश्यकता होगी।

import esbuild from 'esbuild'

const entrypoint = ""
const tsconfig = ""

const build = async () => {
  await Promise.all([
    // bundle for commonjs
    esbuild.build({
      entryPoints: [entrypoint],
      bundle: true,
      minify: true,
      format: 'cjs',
      outfile: `./dist/index.cjs`,
      platform: 'node',
      treeShaking: true,
      tsconfig,
    }),
  ])
}

build()

अपने package.json में एक बिल्ड स्क्रिप्ट जोड़ें

अपने पसंदीदा रनटाइम के साथ चलाएं।

"scripts": {
  "build": "vite-node ./scripts/build.ts",
}

मुझे व्यक्तिगत रूप से विटे-नोड पसंद है। इसलिए यदि आप वास्तव में इसका अनुसरण करना चाहते हैं, तो आपको इसे इंस्टॉल करना होगा:

yarn add vite-node --save-dev

अपना प्रोजेक्ट बनाएं

yarn build

इससे आपका प्रोजेक्ट esbuild के साथ बनेगा और आपको एक नई फ़ाइल dist/index.cjs दिखाई देगी, जो आपके पैकेज का CommonJS बिल्ड है।

प्रवेश बिंदु कॉन्फ़िगर करें

अपने CommonJS एंट्रीपॉइंट पर इंगित करने के लिए अपना package.json अपडेट करें।

"main": "dist/index.cjs",

बम! लीजिए, अब आपने CommonJS के लिए अपना पैकेज बना लिया है। यह तब भी काम करेगा जब आपके पास ESM निर्भरताएँ हों क्योंकि निर्भरताएँ बंडल की जाएंगी
आपके पैकेज के साथ।

जब esbuild को कॉल किया जाता है तो निर्भरता फ़ील्ड बंडल: सच के कारण आउटपुट में शामिल होती है।

टाइपस्क्रिप्ट घोषणाएँ

हालाँकि तकनीकी रूप से इसकी आवश्यकता नहीं है, आप संभवतः टाइपस्क्रिप्ट घोषणाएँ भी चाहेंगे जो दुर्भाग्यवश इस समय आउटपुट नहीं देती है। तो उत्पन्न करने के लिए
वे, आप सामान्य tsc का उपयोग करना चाहेंगे।

अपना tsconfig.json अपडेट करें

इन विकल्पों को अपनी tsconfig.json फ़ाइल में जोड़ने से केवल टाइपस्क्रिप्ट घोषणाएँ आउटपुट होंगी। बाकी पैकेज के बाद से हम बिल्कुल यही चाहते हैं
esbuild के साथ बनाया जा रहा है।

"declaration": true,
"declarationDir": "./dist",
"emitDeclarationOnly": true

अपनी बिल्ड स्क्रिप्ट अपडेट करें

"scripts": {
  "build:tsc": "yarn tsc -p tsconfig.json",
  "build": "vite-node ./scripts/build.ts && yarn build:tsc",
}

दोहरे प्रवेश बिंदु

यह मार्गदर्शिका आपके पैकेज के लिए केवल एक कॉमनजेएस एंट्रीपॉइंट आउटपुट करने की अनुशंसा करती है। व्यक्तिगत रूप से, मुझे लगता है कि यह दो कारणों से सबसे अच्छा विकल्प है:

• बंडल का आकार छोटा करता है
• दोहरे पैकेज के खतरे से बचा जाता है

हालाँकि, यह एकमात्र विकल्प नहीं है। आप अपने पैकेज को CommonJS और ESM के लिए दोहरे प्रवेश बिंदुओं के साथ भी प्रकाशित कर सकते हैं।

ईएसएम बिल्ड को शामिल करने के लिए अपनी बिल्ड स्क्रिप्ट को अपडेट करें

import esbuild from 'esbuild'

const entrypoint = ""
const tsconfig = ""

const build = async () => {
  await Promise.all([
    // bundle for commonjs
    esbuild.build({
      entryPoints: [entrypoint],
      bundle: true,
      minify: true,
      format: 'cjs',
      outfile: `./dist/index.cjs`,
      platform: 'node',
      treeShaking: true,
      tsconfig,
    }),
    // bundle for ESM
    esbuild.build({
      entryPoints: [entrypoint],
      bundle: true,
      minify: true,
      format: 'esm',
      outfile: `./dist/index.js`,
      platform: 'node',
      treeShaking: true,
      tsconfig,
    }),
  ])
}

build()

दोहरे प्रवेश बिंदुओं को शामिल करने के लिए अपनी package.json फ़ाइल को अपडेट करें

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

सोर्स कोड