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

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

runInit函數中執行下列操作：

1. 確保所有已解析的路徑目錄都存在。
2. 寫入順風配置。
3. 編寫css檔。
4. 寫入cn檔。
5. 安裝依賴項。

上面的1、2、3、4在2.12、2.13、2.14部分都有介紹，我們來看看「安裝依賴」操作是如何完成的。

安裝依賴項

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

// 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 是一個優雅的終端微調器，用於在運行 npx shadcn init 命令時顯示訊息「正在安裝依賴項...」。

取得套件管理器

getPackageManager 導入packages/cli/src/utils/get-package-manager.ts

import { detect } from "@antfu/ni"

export async function getPackageManager(
  targetDir: string
): Promise {
  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"
}

你在 pnpm 專案中使用過 npm 嗎？我經常無法安裝軟體包，因為您在 pnpm 專案中使用 npm。

@antfu/ni 允許您使用正確的套件管理器，並且 detector 是一個函數，它根據 cwd 給出給定專案中使用的 packageManager。

我在 @antfu/ni Github 自述文件中找不到任何有關檢測方法的內容。除非您在某些開源程式碼庫中閱讀過它，否則您怎麼知道有這樣的方法存在？

艾克卡

Execa 在您的腳本、應用程式或庫中執行命令。與 shell 不同，它針對程式使用進行了最佳化。建構在 child_process 核心模組之上。這是由傳奇人物 Sindre Sorhus 建造的

shadcn-ui/ui CLI 使用 execa 安裝必要的依賴項作為 npx shadcn-ui init 指令的一部分。

結論

shadcn-ui CLI 使用由傳奇人物 Sindre Sorhu 建構的 execa。 Execa 用於在腳本檔案中安裝必要的依賴項。我們都熟悉執行安裝命令，但如果您想以程式設計方式在腳本中安裝某些套件，可以使用 execa。

shadcn-ui CLI 使用 @antfu/ni 中的「檢測」方法檢測專案中使用的套件管理器。

本文標誌著我對執行 npx shadcn-ui init 命令時幕後發生的情況的研究和了解已完成。

我正在繼續研究 add 指令。

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

關於我：

網址：https://ramunarasinga.com/

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

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

電子郵件：[email protected]

從頭開始建構 shadcn-ui/ui

參考：

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 { detector } from "@antfu/ni"&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus