首页 > web前端 > js教程 > 正文

shadcn-ui/ui 代码库分析:shadcn-ui CLI 是如何工作的? — 第 4 部分

WBOY
发布: 2024-07-18 06:33:31
原创
356 人浏览过

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

在第 2.11 部分中,我们研究了 runInit 函数以及 shadcn-ui/ui 如何确保配置中的 returnedPaths 中提供的目录存在。

runInit函数中执行以下操作:

shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 4

  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

雷雷

templates.UTILS 包含以下代码

雷雷

cn 实用程序实际上是在运行 shadcn init 时以字符串形式返回并写入 lib/utils 的代码。

结论:

packages/cli/src/commands/init.ts 中的 templates.UTILS 变量包含 cn 实用函数相关代码。

雷雷

这里要注意的是,此代码作为字符串呈现到 fs.writeFile 中,写入提供的路径,如下所示

雷雷

想学习如何从头开始构建 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!