أردت معرفة كيفية عمل shadcn-ui CLI. في هذه المقالة، أناقش الكود المستخدم لبناء shadcn-ui/ui CLI.

في الجزء 2.11، نظرنا إلى وظيفة runInit وكيف يضمن shadcn-ui/ui وجود الدلائل المتوفرة في ResolvePaths في التكوين.

يتم تنفيذ العمليات التالية في وظيفة runInit:

1. تأكد من وجود جميع أدلة المسارات التي تم حلها.
2. اكتب تكوين الريح الخلفية.
3. كتابة ملف CSS.
4. كتابة ملف cn.
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()

ora عبارة عن أداة دوارة طرفية أنيقة وتُستخدم لإظهار الرسالة "جارٍ تثبيت التبعيات..." عند تشغيل الأمر npx shadcn init.

getPackageManager

getPackageManager عبارة عن حزم مستوردة/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"
}

هل سبق لك استخدام npm في مشروع pnpm؟ لقد فشلت في كثير من الأحيان في تثبيت الحزمة لأنك تستخدم npm في مشروع pnpm.

@antfu/ni يتيح لك استخدام مدير الحزم المناسب، والكشف هو وظيفة توفر packageManager المستخدم في مشروع معين بناءً على cwd.

لا يمكنني العثور على أي شيء مذكور حول طريقة الكشف في الملف التمهيدي @antfu/ni Github. كيف يمكنك معرفة وجود مثل هذه الطريقة إلا إذا قرأتها في قاعدة بيانات مفتوحة المصدر؟

com.execa

يقوم Execa بتشغيل الأوامر في البرنامج النصي أو التطبيق أو المكتبة الخاصة بك. على عكس الأصداف، تم تحسينه للاستخدام البرمجي. بنيت على رأس الوحدة الأساسية Child_process. تم بناء هذا من قبل الأسطورة، سيندر سورهوس

shadcn-ui/ui CLI يستخدم execa لتثبيت التبعيات الضرورية كجزء من أمر npx shadcn-ui init.

خاتمة

shadcn-ui CLI يستخدم execa، الذي أنشأه الأسطورة Sindre Sorhu. يتم استخدام 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