shadcn-ui/ui 代码库分析：shadcn-ui CLI 是如何工作的？ - 第1部分

php中文网 2024-10-15 11:13:07

我想了解 shadcn-ui cli 是如何工作的。在本文中，我讨论用于构建 shadcn-ui/ui cli 的代码。

在第2.10部分中，我们查看了getregistrybasecolors函数、提示、创建components.json和resolveconfigpaths。

现在我们了解了promptforminimalconfig函数是如何工作的，是时候我们来了解runinit函数是如何工作的了。

运行初始化

export async function runinit(cwd: string, config: config) {
  const spinner = ora(`initializing project...`)?.start()

  // ensure all resolved paths directories exist.
  for (const [key, resolvedpath] of object.entries(config.resolvedpaths)) {
    // determine if the path is a file or directory.
    // todo: is there a better way to do this?
    let dirname = path.extname(resolvedpath)
      ? path.dirname(resolvedpath)
      : resolvedpath

    // if the utils alias is set to something like "@/lib/utils",
    // assume this is a file and remove the "utils" file name.
    // todo: in future releases we should add support for individual utils.
    if (key === "utils" &amp;&amp; resolvedpath.endswith("/utils")) {
      // remove /utils at the end.
      dirname = dirname.replace(/\/utils$/, "")
    }

    if (!existssync(dirname)) {
      await fs.mkdir(dirname, { recursive: true })
    }
  }

  const extension = config.tsx ? "ts" : "js"

  const tailwindconfigextension = path.extname(
    config.resolvedpaths.tailwindconfig
  )

  let tailwindconfigtemplate: string
  if (tailwindconfigextension === ".ts") {
    tailwindconfigtemplate = config.tailwind.cssvariables
      ? templates.tailwind_config_ts_with_variables
      : templates.tailwind_config_ts
  } else {
    tailwindconfigtemplate = config.tailwind.cssvariables
      ? templates.tailwind_config_with_variables
      : templates.tailwind_config
  }

  // write tailwind config.
  await fs.writefile(
    config.resolvedpaths.tailwindconfig,
    template(tailwindconfigtemplate)({
      extension,
      prefix: config.tailwind.prefix,
    }),
    "utf8"
  )

  // write css file.
  const basecolor = await getregistrybasecolor(config.tailwind.basecolor)
  if (basecolor) {
    await fs.writefile(
      config.resolvedpaths.tailwindcss,
      config.tailwind.cssvariables
        ? config.tailwind.prefix
          ? applyprefixescss(basecolor.cssvarstemplate, config.tailwind.prefix)
          : basecolor.cssvarstemplate
        : basecolor.inlinecolorstemplate,
      "utf8"
    )
  }

  // write cn file.
  await fs.writefile(
    `${config.resolvedpaths.utils}.${extension}`,
    extension === "ts" ? templates.utils : templates.utils_js,
    "utf8"
  )

  spinner?.succeed()

  // 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()
}

这个函数相当大，让我们通过研究小代码块来分解这个分析。

嗯，这段代码已经添加了一些特定于操作的注释。我们可以遵循相同的评论将此分析分解为多个部分。

确保所有已解析的路径目录都存在。
编写 tailwind 配置。
编写css文件。
写入 cn 文件。
安装依赖项。

在本文中，我们来看看 shadcn-ui/ui cli 如何确保所有已解析的路径目录都存在。

确保所有已解析的路径目录都存在。

// ensure all resolved paths directories exist.
  for (const [key, resolvedpath] of object.entries(config.resolvedpaths)) {
    // determine if the path is a file or directory.
    // todo: is there a better way to do this?
    let dirname = path.extname(resolvedpath)
      ? path.dirname(resolvedpath)
      : resolvedpath

    // if the utils alias is set to something like "@/lib/utils",
    // assume this is a file and remove the "utils" file name.
    // todo: in future releases we should add support for individual utils.
    if (key === "utils" &amp;&amp; resolvedpath.endswith("/utils")) {
      // remove /utils at the end.
      dirname = dirname.replace(/\/utils$/, "")
    }

    if (!existssync(dirname)) {
      await fs.mkdir(dirname, { recursive: true })
    }
  }

在2.10文章中，我谈到了config如何添加resolvedpaths对象。

// determine if the path is a file or directory.
// todo: is there a better way to do this?
let dirname = path.extname(resolvedpath)
  ? path.dirname(resolvedpath)
  : resolvedpath

上面的代码使用了path。 path.extname() 方法返回路径的扩展名，从最后一次出现的 . （句点）字符到路径最后部分中字符串的末尾。如果没有 .在路径的最后部分，或者如果没有 .路径基本名称的第一个字符以外的字符（请参阅path.basename()），返回空字符串。

// if the utils alias is set to something like "@/lib/utils",
// assume this is a file and remove the "utils" file name.
// todo: in future releases we should add support for individual utils.
if (key === "utils" &amp;&amp; resolvedpath.endswith("/utils")) {
  // remove /utils at the end.
  dirname = dirname.replace(/\/utils$/, "")
}

上面代码中的注释已经说明了一切。

if (!existsSync(dirname)) {
  await fs.mkdir(dirname, { recursive: true })
}

existssync 是“fs”包中的函数，如果路径存在则返回 true，否则返回 false。

如果目录不存在，则使用fs.mkdir创建目录。

结论：

现在我了解了promptforminimalconfig函数的工作原理，是时候继续了解runinit函数在shadcn-ui/ui cli相关源代码中的工作原理了。

runinit 函数相当大，让我们通过研究小代码块来分解这个分析。这已经有一些注释解释了它的作用。这些带注释的操作如下：

确保所有已解析的路径目录都存在。
编写 tailwind 配置。
编写css文件。
写入 cn 文件。
安装依赖项。

我讨论了shadcn的init命令如何通过使用“fs”包中的existssync来确保所有已解析的路径目录都存在，如果目录不存在，该函数只需使用mkdir创建一个新目录。

想学习如何从头开始构建 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

参考：

https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#l81
https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#l307

以上就是shadcn-ui/ui 代码库分析：shadcn-ui CLI 是如何工作的？ - 第1部分的详细内容，更多请关注php中文网其它相关文章！

本文地址： http://www.ipsmc.com/web/3227.html