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 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
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.
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
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 4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
