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, 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.
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 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?
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.
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
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
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!
