Ich wollte herausfinden, wie die shadcn-ui-CLI funktioniert. In diesem Artikel bespreche ich den Code, der zum Erstellen der shadcn-ui/ui-CLI verwendet wird.

In Teil 2.11 haben wir uns die runInit-Funktion angesehen und wie shadcn-ui/ui sicherstellt, dass Verzeichnisse vorhanden sind, die in „resolvedPaths“ in der Konfiguration bereitgestellt werden.

Die folgenden Vorgänge werden in der runInit-Funktion ausgeführt:

1. Stellen Sie sicher, dass alle aufgelösten Pfadverzeichnisse vorhanden sind.
2. Rückenwindkonfiguration schreiben.
3. CSS-Datei schreiben.
4. CN-Datei schreiben.
5. Abhängigkeiten installieren.

1, 2, 3, 4 von oben werden in Teil 2.12, 2.13 und 2.14 behandelt. Lassen Sie uns herausfinden, wie der Vorgang „Abhängigkeiten installieren“ durchgeführt wird.

Abhängigkeiten installieren

Der folgende Codeausschnitt stammt aus 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 ist ein eleganter Terminal-Spinner und wird verwendet, um die Meldung „Abhängigkeiten werden installiert…“ anzuzeigen, wenn Sie den Befehl npx shadcn init ausführen.

getPackageManager

getPackageManager ist importierte Pakete/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"
}

Haben Sie npm jemals in einem pnpm-Projekt verwendet? Ich habe es getan und es kommt oft vor, dass die Installation des Pakets fehlschlägt, weil Sie npm in einem pnpm-Projekt verwenden.

@antfu/ni ermöglicht Ihnen die Verwendung des richtigen Paketmanagers und „Detect“ ist eine Funktion, die den in einem bestimmten Projekt verwendeten Paketmanager basierend auf cwd angibt.

Ich kann in der @antfu/ni Github-Readme-Datei nichts über die Erkennungsmethode finden. Woher wissen Sie, dass eine solche Methode existiert, wenn Sie sie nicht in einer Open-Source-Codebasis lesen?

Exekutive

Execa führt Befehle in Ihrem Skript, Ihrer Anwendung oder Ihrer Bibliothek aus. Im Gegensatz zu Shells ist es für die programmgesteuerte Verwendung optimiert. Aufbauend auf dem Kernmodul child_process. Dies wurde von der Legende Sindre Sorhus

shadcn-ui/ui CLI verwendet Execa, um die erforderlichen Abhängigkeiten als Teil des Befehls npx shadcn-ui init zu installieren.

Abschluss

shadcn-ui CLI verwendet Execa, erstellt von der Legende Sindre Sorhu. Execa wird verwendet, um die notwendigen Abhängigkeiten in einer Skriptdatei zu installieren. Wir alle sind mit der Ausführung von Installationsbefehlen vertraut, aber wenn Sie einige Pakete programmgesteuert in einem Skript installieren möchten, kann execa verwendet werden.

shadcn-ui CLI erkennt den in Ihrem Projekt verwendeten Paketmanager mithilfe der Methode „detect“ von @antfu/ni.

Dieser Artikel markiert mein Bestreben, zu studieren und zu erfahren, was unter der Haube passiert, wenn Sie den Befehl npx shadcn-ui init ausführen, als abgeschlossen.

Ich lerne jetzt den Add-Befehl.

Möchten Sie lernen, wie man shadcn-ui/ui von Grund auf erstellt? Schauen Sie sich an Build-from-Scratch

Über mich:

Website: https://ramunarasinga.com/

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

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

E-Mail: [email protected]

Shadcn-ui/ui von Grund auf erstellen

Verweise:

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 { discover } von „@antfu/ni“&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus