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中文网其他相关文章！