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

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 von oben werden in Teil 2.12 und 2.13 behandelt. Lassen Sie uns herausfinden, wie der Vorgang „CN-Datei schreiben“ durchgeführt wird.

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

an

Schreiben Sie eine CN-Datei

Der folgende Codeausschnitt wurde aus cli/src/commands/init.ts ausgewählt

// Write cn file.
  await fs.writeFile(
    \`${config.resolvedPaths.utils}.${extension}\`,
    extension === "ts" ? templates.UTILS : templates.UTILS\_JS,
    "utf8"
  )

templates.UTILS enthält den folgenden Code

export const UTILS = \`import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue\[\]) {
  return twMerge(clsx(inputs))
}
\`

export const UTILS\_JS = \`import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}
\`

cn-Utility ist im wahrsten Sinne des Wortes Code, der als String zurückgegeben und in lib/utils geschrieben wird, wenn Sie shadcn init ausführen.

Abschluss:

Die Variable templates.UTILS in packets/cli/src/commands/init.ts enthält den Code für die Funktion des cn-Dienstprogramms.

export const UTILS = \`import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue\[\]) {
  return twMerge(clsx(inputs))
}
\`


export const UTILS\_JS = \`import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}
\`

Der Haken dabei ist, dass dieser Code als String in fs.writeFile präsentiert wird, der in einen bereitgestellten Pfad schreibt, wie unten gezeigt

await fs.writeFile(
    \`${config.resolvedPaths.utils}.${extension}\`,
    extension === "ts" ? templates.UTILS : templates.UTILS\_JS,
    "utf8"
  )

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#L331C3-L356C4
2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/templates.ts#L1

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