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

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 daripada di atas diliputi dalam bahagian 2.12 dan 2.13, mari ketahui cara operasi "Tulis fail cn" dilakukan.

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

Tulis fail cn

Coretan kod di bawah dipilih daripada cli/src/commands/init.ts

// Write cn file.
  await fs.writeFile(
    \`${config.resolvedPaths.utils}.${extension}\`,
    extension === "ts" ? templates.UTILS : templates.UTILS\_JS,
    "utf8"
  )

templat.UTILS mengandungi kod di bawah

export const UTILS = \`import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue\[\]) {
  return twMerge(clsx(inputs))
}
\`

export const UTILS\_JS = \`import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}
\`

utiliti cn secara literal adalah kod yang dikembalikan sebagai rentetan dan ditulis kepada lib/utils apabila anda menjalankan shadcn init.

Kesimpulan:

templates.UTILS pembolehubah dalam packages/cli/src/commands/init.ts mengandungi kod berkaitan fungsi utiliti cn.

export const UTILS = \`import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue\[\]) {
  return twMerge(clsx(inputs))
}
\`


export const UTILS\_JS = \`import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}
\`

Tangkap di sini ialah, kod ini dibentangkan sebagai rentetan ke dalam fs.writeFile yang menulis ke laluan yang disediakan seperti yang ditunjukkan di bawah

await fs.writeFile(
    \`${config.resolvedPaths.utils}.${extension}\`,
    extension === "ts" ? templates.UTILS : templates.UTILS\_JS,
    "utf8"
  )

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#L331C3-L356C4
2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/templates.ts#L1

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