shadcn-ui/ui 程式碼庫分析：shadcn-ui CLI 是如何運作的？ — 第 4 部分

我想了解 shadcn-ui CLI 是如何運作的。在本文中，我將討論用於建立 shadcn-ui/ui CLI 的程式碼。

在第 2.11 部分中，我們研究了 runInit 函數以及 shadcn-ui/ui 如何確保配置中的 returnedPaths 中提供的目錄存在。

runInit 函數中執行以下操作：

1. 確保所有已解析的路徑目錄都存在。
2. 寫 tailwind 設定。
3. 編寫CSS檔案。
4. 寫入 cn 檔案。
5. 安裝依賴項。

上面的1,2,3在2.12和2.13部分都有介紹，我們來看看「寫入cn檔案」操作是如何完成的。

想學習如何從頭開始建立 shadcn-ui/ui 嗎？查看 從頭開始建造

寫入cn文件

以下程式碼片段摘自 cli/src/commands/init.ts

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

templates.UTILS 包含以下程式碼

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 實用程式實際上是在執行 shadcn init 時以字串形式傳回並寫入 lib/utils 的程式碼。

結論：

packages/cli/src/commands/init.ts 中的 templates.UTILS 變數包含 cn 實用函數相關程式碼。

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))
}
\`

這裡要注意的是，此程式碼作為字串呈現到 fs.writeFile 中，寫入提供的路徑，如下所示

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

想學習如何從頭開始建立 shadcn-ui/ui 嗎？查看 從頭開始建造

關於我：

網址：https://ramunarasinga.com/

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

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

電子郵件：ramu.narasinga@gmail.com

從頭開始建構 shadcn-ui/ui

參考：

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

以上是shadcn-ui/ui 程式碼庫分析：shadcn-ui CLI 是如何運作的？ — 第 4 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！