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 l'existence des répertoires fournis dans les chemins résolus dans la configuration.

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. Écrire la configuration du vent arrière.
3. Écrire un fichier CSS.
4. Écrire le fichier cn.
5. Installer les dépendances.

1, 2, 3, 4 ci-dessus sont traités dans les parties 2.12, 2.13 et 2.14, découvrons comment se déroule l'opération « Installer les dépendances ».

Installer les dépendances

L'extrait de code ci-dessous est extrait de 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 est un élégant spinner de terminal et est utilisé pour afficher le message « Installation des dépendances… » lorsque vous exécutez la commande npx shadcn init.

getPackageManager

getPackageManager est importé 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"
}

Avez-vous déjà utilisé npm dans un projet pnpm ? Je l'ai fait et souvent, l'installation du package ne parvient pas car vous utilisez npm dans un projet pnpm.

@antfu/ni vous permet d'utiliser le bon gestionnaire de packages et de détecter est une fonction qui donne le packageManager utilisé dans un projet donné basé sur cwd.

Je ne trouve rien de mentionné sur la méthode de détection dans le fichier readme de @antfu/ni Github. Comment sauriez-vous qu'une telle méthode existe à moins de la lire dans une base de code open source ?

exécutable

Execa exécute des commandes dans votre script, application ou bibliothèque. Contrairement aux shells, il est optimisé pour une utilisation programmatique. Construit sur le module principal child_process. Ceci est construit par la légende Sindre Sorhus

shadcn-ui/ui CLI utilise execa pour installer les dépendances nécessaires dans le cadre de la commande npx shadcn-ui init.

Conclusion

shadcn-ui CLI utilise execa, construit par la légende Sindre Sorhu. Execa est utilisé pour installer les dépendances nécessaires dans un fichier script. Nous sommes tous familiers avec l'exécution de commandes d'installation, mais si vous souhaitez installer certains packages dans un script par programme, execa peut être utilisé.

shadcn-ui CLI détecte le gestionnaire de packages utilisé dans votre projet à l'aide de la méthode « détecter » de @antfu/ni.

Cet article marque ma quête pour étudier et apprendre ce qui se passe sous le capot lorsque vous exécutez la commande npx shadcn-ui init comme terminée.

Je passe à l'étude de la commande add.

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

Sur moi:

Site Web : https://ramunarasinga.com/

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

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

E-mail : [email protected]

Créer shadcn-ui/ui à partir de zéro

Les références:

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 { détecter } depuis "@antfu/ni"&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus