我想了解 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