shadcn-ui/ui-Codebasisanalyse: Wie funktioniert die shadcn-ui-CLI? – Teil 5

Ich wollte herausfinden, wie die CLI von shadcn-ui 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 Verzeichnisse für aufgelöste Pfade 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 wurde aus cli/src/commands/init.ts ausgewählt

// 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<"yarn" | "pnpm" | "bun" | "npm"> {
  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 Github-Readme-Datei von @antfu/ni nichts über die Erkennungsmethode finden. Wie würden Sie wissen, 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 gebaut

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 „Erkennungs“-Methode 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 als abgeschlossen ausführen.

Ich lerne jetzt den Add-Befehl.

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

an

Über mich:

Website: https://ramunarasinga.com/

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

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

E-Mail: ramu.narasinga@gmail.com

Shadcn-ui/ui von Grund auf erstellen

Referenzen:

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+%7B+detect+%7D+from+%22%40antfu%2Fni%22&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus

Das obige ist der detaillierte Inhalt vonshadcn-ui/ui-Codebasisanalyse: Wie funktioniert die shadcn-ui-CLI? – Teil 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!