मैं जानना चाहता था कि shadcn-ui CLI कैसे काम करता है। इस आलेख में, मैं shadcn-ui/ui CLI बनाने के लिए उपयोग किए गए कोड पर चर्चा करता हूं।

भाग 2.11 में, हमने runInit फ़ंक्शन को देखा और कैसे shadcn-ui/ui कॉन्फिगरेशन में सॉल्वडपाथ में प्रदान की गई निर्देशिकाओं को सुनिश्चित करता है।

निम्नलिखित ऑपरेशन runInit फ़ंक्शन में किए जाते हैं:

1. सुनिश्चित करें कि सभी हल किए गए पथ निर्देशिकाएं मौजूद हैं।
2. टेलविंड कॉन्फ़िगरेशन लिखें।
3. सीएसएस फ़ाइल लिखें।
4. सीएन फ़ाइल लिखें।
5. निर्भरताएं स्थापित करें।

उपर्युक्त में से 1, 2, 3, 4 भाग 2.12, 2.13 और 2.14 में शामिल हैं, आइए जानें कि "निर्भरता स्थापित करें" ऑपरेशन कैसे किया जाता है।

निर्भरताएँ स्थापित करें

नीचे दिया गया कोड स्निपेट cli/src/commands/init.ts से लिया गया है

// Install dependencies.
const dependenciesSpinner = ora(\`Installing dependencies...\`)?.start()
const packageManager = await getPackageManager(cwd)

// TODO: add support for other icon libraries.
const deps = \[
  ...PROJECT\_DEPENDENCIES,
  config.style === "new-york" ? "@radix-ui/react-icons" : "lucide-react",
\]

await execa(
  packageManager,
  \[packageManager === "npm" ? "install" : "add", ...deps\],
  {
    cwd,
  }
)
dependenciesSpinner?.succeed()

ओरा एक सुंदर टर्मिनल स्पिनर है और जब आप npx shadcn init कमांड चलाते हैं तो इसका उपयोग "निर्भरता स्थापित करना..." संदेश दिखाने के लिए किया जाता है।

GetPackageManager

getPackageManager को packages/cli/src/utils/get-package-manager.ts से आयात किया जाता है

import { detect } from "@antfu/ni"

export async function getPackageManager(
  targetDir: string
): Promise {
  const packageManager = await detect({ programmatic: true, cwd: targetDir })

  if (packageManager === "yarn@berry") return "yarn"
  if (packageManager === "pnpm@6") return "pnpm"
  if (packageManager === "bun") return "bun"

  return packageManager ?? "npm"
}

क्या आपने कभी पीएनपीएम प्रोजेक्ट में एनपीएम का उपयोग किया है? मेरे पास है और कई बार, यह पैकेज स्थापित करने में विफल रहता है क्योंकि आप पीएनपीएम प्रोजेक्ट में एनपीएम का उपयोग कर रहे हैं।

@antfu/ni आपको सही पैकेज मैनेजर का उपयोग करने और एक फ़ंक्शन का पता लगाने की सुविधा देता है जो cwd के आधार पर किसी दिए गए प्रोजेक्ट में उपयोग किए गए पैकेजमैनेजर को देता है।

मुझे @antfu/ni Github रीडमी में डिटेक्ट विधि के बारे में कुछ भी उल्लिखित नहीं मिला। जब तक आप इसे किसी ओपन सोर्स कोडबेस में नहीं पढ़ेंगे, आपको कैसे पता चलेगा कि ऐसी कोई विधि मौजूद है?

निष्पादन

Execa आपकी स्क्रिप्ट, एप्लिकेशन या लाइब्रेरी में कमांड चलाता है। शेल के विपरीत, इसे प्रोग्रामेटिक उपयोग के लिए अनुकूलित किया गया है। चाइल्ड_प्रोसेस कोर मॉड्यूल के शीर्ष पर निर्मित। इसे पौराणिक कथाकार सिंड्रे सोरहस ने बनवाया था

shadcn-ui/ui CLI npx shadcn-ui init कमांड के भाग के रूप में आवश्यक निर्भरताएँ स्थापित करने के लिए execa का उपयोग करता है।

निष्कर्ष

shadcn-ui CLI एक्ज़ेका का उपयोग करता है, जिसे लीजेंड सिंड्रे सोरहू ने बनाया है। Execa का उपयोग स्क्रिप्ट फ़ाइल में आवश्यक निर्भरताएँ स्थापित करने के लिए किया जाता है। हम सभी इंस्टॉलेशन कमांड निष्पादित करने से परिचित हैं, लेकिन यदि आप किसी स्क्रिप्ट में प्रोग्रामेटिक रूप से कुछ पैकेज इंस्टॉल करना चाहते हैं, तो execa का उपयोग किया जा सकता है।

shadcn-ui CLI @antfu/ni से "डिटेक्ट" विधि का उपयोग करके आपके प्रोजेक्ट में उपयोग किए गए पैकेज मैनेजर का पता लगाता है।

यह लेख अध्ययन करने और यह जानने की मेरी खोज को दर्शाता है कि जब आप npx shadcn-ui init कमांड को पूरा होने पर चलाते हैं तो हुड के नीचे क्या होता है।

मैं ऐड कमांड का अध्ययन करने के लिए आगे बढ़ रहा हूं।

क्या आप सीखना चाहते हैं कि शुरुआत से shadcn-ui/ui कैसे बनाएं? जांचें बिल्ड-फ्रॉम-स्क्रैच

मेरे बारे में:

वेबसाइट: https://ramunarasinga.com/

लिंक्डइन: https://www.linkedin.com/in/ramu-narasinga-189361128/

जीथब: https://github.com/Ramu-Narasinga

ईमेल: [email protected]

स्क्रैच से shadcn-ui/ui बनाएं

सन्दर्भ:

1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#L382
2. https://www.npmjs.com/package/ora
3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-package-manager.ts#L3
4. https://www.npmjs.com/package/@antfu/ni
5. https://github.com/antfu-collective/ni#readme
6. https://github.com/search?q=import {पता लगाएं } "@antfu/ni"&type=code से
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus