Analyse de la base de code shadcn-ui/ui : comment fonctionne la CLI shadcn-ui ? — Partie 4

Je voulais découvrir comment fonctionne la CLI shadcn-ui. Dans cet article, je discute du code utilisé pour créer la CLI shadcn-ui/ui.

Dans la partie 2.11, nous avons examiné la fonction runInit et comment shadcn-ui/ui garantit que les répertoires fournis dans les chemins résolus dans la configuration existent.

Les opérations suivantes sont effectuées dans la fonction runInit :

1. Assurez-vous que tous les répertoires de chemins résolus existent.
2. Écrivez la configuration du vent arrière.
3. Écrivez le fichier CSS.
4. Écrivez le fichier cn.
5. Installer les dépendances.

1, 2, 3 de ce qui précède sont traités dans les parties 2.12 et 2.13, découvrons comment se déroule l'opération « Écrire un fichier cn ».

Vous voulez apprendre à créer shadcn-ui/ui à partir de zéro ? Découvrez construire à partir de zéro

Écrire le fichier CN

L'extrait de code ci-dessous est extrait de cli/src/commands/init.ts

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

templates.UTILS contient le code ci-dessous

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))
}
\`

L'utilitaire cn est littéralement du code renvoyé sous forme de chaîne et écrit dans lib/utils lorsque vous exécutez shadcn init.

Conclusion:

La variable templates.UTILS dans packages/cli/src/commands/init.ts contient le code associé à la fonction utilitaire 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))
}
\`

Attrapez ici, ce code est présenté sous forme de chaîne dans fs.writeFile qui écrit dans un chemin fourni comme indiqué ci-dessous

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

Vous voulez apprendre à créer shadcn-ui/ui à partir de zéro ? Découvrez construire à partir de zéro

Sur moi:

Site Internet : https://ramunarasinga.com/

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

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

Email : ramu.narasinga@gmail.com

Construisez shadcn-ui/ui à partir de zéro

Références :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!