Quería saber cómo funciona shadcn-ui CLI. En este artículo, analizo el código utilizado para crear la CLI shadcn-ui/ui.

En la parte 2.11, analizamos la función runInit y cómo shadcn-ui/ui garantiza que existan los directorios proporcionados en resolvePaths en la configuración.

Las siguientes operaciones se realizan en la función runInit:

1. Asegúrese de que existan todos los directorios de rutas resueltas.
2. Escribir configuración de viento de cola.
3. Escribir archivo css.
4. Escribir archivo cn.
5. Instalar dependencias.

1, 2, 3, 4 de lo anterior se tratan en las partes 2.12, 2.13 y 2.14, descubramos cómo se realiza la operación "Instalar dependencias".

Instalar dependencias

El siguiente fragmento de código se seleccionó 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 es un elegante selector de terminal y se utiliza para mostrar el mensaje "Instalando dependencias..." cuando ejecuta el comando npx shadcn init.

getPackageManager

getPackageManager son paquetes importados/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"
}

¿Alguna vez has usado npm en un proyecto pnpm? Lo he hecho y muchas veces no puedo instalar el paquete porque estás usando npm en un proyecto pnpm.

@antfu/ni te permite usar el administrador de paquetes correcto y detectar es una función que proporciona el administrador de paquetes utilizado en un proyecto determinado basado en cwd.

No puedo encontrar nada mencionado sobre el método de detección en el archivo Léame de @antfu/ni Github. ¿Cómo sabrías que existe un método de este tipo a menos que lo leas en algún código base de código abierto?

ejecutivo

Execa ejecuta comandos en su script, aplicación o biblioteca. A diferencia de los shells, está optimizado para uso programático. Construido sobre el módulo principal child_process. Esto fue construido por la leyenda Sindre Sorhus

shadcn-ui/ui CLI usa execa para instalar las dependencias necesarias como parte del comando init npx shadcn-ui.

Conclusión

shadcn-ui CLI usa execa, creado por la leyenda Sindre Sorhu. Execa se utiliza para instalar las dependencias necesarias en un archivo de script. Todos estamos familiarizados con la ejecución de comandos de instalación, pero si desea instalar algunos paquetes en un script mediante programación, puede utilizar execa.

shadcn-ui CLI detecta el administrador de paquetes utilizado en su proyecto usando el método de "detección" de @antfu/ni.

Este artículo marca mi búsqueda para estudiar y aprender qué sucede bajo el capó cuando ejecutas el comando npx shadcn-ui init como completado.

Continúo estudiando el comando agregar.

¿Quieres aprender a crear shadcn-ui/ui desde cero? Consulte compilación desde cero

Acerca de mí:

Sitio web: https://ramunarasinga.com/

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

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

Correo electrónico: [email protected]

Crea shadcn-ui/ui desde cero

Referencias:

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