analisis pangkalan kod shadcn-ui/ui: Bagaimanakah CLI shadcn-ui berfungsi? - Bahagian 5

Saya ingin mengetahui cara shadcn-ui CLI berfungsi. Dalam artikel ini, saya membincangkan kod yang digunakan untuk membina shadcn-ui/ui CLI.

Dalam bahagian 2.11, kami melihat fungsi runInit dan cara shadcn-ui/ui memastikan direktori yang disediakan dalam resolvedPaths dalam konfigurasi wujud.

Operasi berikut dilakukan dalam fungsi runInit:

1. Pastikan semua direktori laluan yang diselesaikan wujud.
2. Tulis konfigurasi tailwind.
3. Tulis fail css.
4. Tulis fail cn.
5. Pasang kebergantungan.

1, 2, 3, 4 daripada di atas diliputi dalam bahagian 2.12, 2.13 dan 2.14, mari ketahui cara operasi "Pasang kebergantungan" dilakukan.

Pasang kebergantungan

Coretan kod di bawah dipilih daripada 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 ialah pemutar terminal yang elegan dan digunakan untuk menunjukkan mesej "Memasang kebergantungan..." apabila anda menjalankan perintah npx shadcn init.

getPackageManager

getPackageManager ialah pakej yang diimport/cli/src/utils/get-package-manager.ts

import { detect } from "@antfu/ni"

export async function getPackageManager(
  targetDir: string
): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
  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"
}

Pernahkah anda menggunakan npm dalam projek pnpm? Saya pernah dan sering kali, ia gagal memasang pakej kerana anda menggunakan npm dalam projek pnpm.

@antfu/ni membolehkan anda menggunakan pengurus pakej yang betul dan mengesan ialah fungsi yang memberikan packageManager yang digunakan dalam projek tertentu berdasarkan cwd.

Saya tidak dapat mencari apa-apa yang disebut tentang kaedah pengesan dalam @antfu/ni Github readme. Bagaimanakah anda tahu kaedah sedemikian wujud melainkan anda membacanya dalam beberapa pangkalan kod sumber terbuka?

execa

Execa menjalankan arahan dalam skrip, aplikasi atau pustaka anda. Tidak seperti cangkerang, ia dioptimumkan untuk penggunaan program. Dibina di atas modul teras child_process. Ini dibina oleh lagenda, Sindre Sorhus

shadcn-ui/ui CLI menggunakan execa untuk memasang kebergantungan yang diperlukan sebagai sebahagian daripada perintah init npx shadcn-ui.

Kesimpulan

shadcn-ui CLI menggunakan execa, dibina oleh legenda, Sindre Sorhu. Execa digunakan untuk memasang kebergantungan yang diperlukan dalam fail skrip. Kita semua sudah biasa dengan melaksanakan arahan pemasangan tetapi jika anda ingin memasang beberapa pakej dalam skrip secara terprogram, execa boleh digunakan.

shadcn-ui CLI mengesan pengurus pakej yang digunakan dalam projek anda menggunakan kaedah “detect” daripada @antfu/ni.

Artikel ini menandakan usaha saya untuk mengkaji dan mengetahui perkara yang berlaku di bawah hud apabila anda menjalankan perintah init npx shadcn-ui sebagai selesai.

Saya meneruskan untuk mengkaji arahan tambah.

Ingin belajar cara membina shadcn-ui/ui dari awal? Lihat bina-dari-conteng

tentang saya:

Laman web: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

E-mel: ramu.narasinga@gmail.com

Bina shadcn-ui/ui dari awal

Rujukan:

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+%7B+detect+%7D+from+%22%40antfu%2Fni%22&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus

Atas ialah kandungan terperinci analisis pangkalan kod shadcn-ui/ui: Bagaimanakah CLI shadcn-ui berfungsi? - Bahagian 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!