@@ -10,11 +10,11 @@ Shadcn ui 是最近比较火的一个 React 组件库，官方介绍其并非组
1010
1111<!-- truncate-->
1212
13- # 使用
13+ ## 使用
1414
15- ## 初始化
15+ ### 初始化
1616
17- shadcn ui 依赖于 tailwindcss，来实现， 所以使用 shadcn ui 的组件需要安装和配置 tailwindcss，这里就不细说了。
17+ shadcn ui 依赖于 tailwindcss，所以使用 shadcn ui 的组件需要安装和配置 tailwindcss，这里就不细说了。
1818
1919tailwindcss 安装完就可以使用 shadcn ui 提供的 cli 工具来初始化一些配置了：
2020
@@ -26,9 +26,8 @@ npx shadcn-ui@latest init
2626
2727![ image-20240428212404577] ( ./../public/images/image-20240428212404577.png )
2828
29- 执行这一步主要会生成一个` components.json ` 的配置文件，后续添加的时候需要读取这个配置文件的内容。
30-
3129``` json
30+ // components.json
3231{
3332 "$schema" : " https://ui.shadcn.com/schema.json"
3433 // 组件样式
@@ -53,7 +52,7 @@ npx shadcn-ui@latest init
5352}
5453```
5554
56- ## 添加组件
55+ ### 添加组件
5756
5857使用 cli 命令添加 shadcn ui 具有的组件，比如添加一个` button ` 组件
5958
@@ -65,17 +64,17 @@ npx shadcn-ui@latest add button
6564
6665![ shadcn-code] ( ./../public/images/shadcn-code.png )
6766
68- ## 更新组件
67+ ### 更新组件
6968
7069shadcn 的 cli 还有一个` diff ` 命令用于显示组件更新，执行` diff button ` 可以看到其会在终端显示远端和本地存在不同的代码行，通过蓝绿色区分开，说实话，这功能感觉比较鸡肋。
7170
7271![ image-20240428214650945] ( ./../public/images/image-20240428214650945.png )
7372
74- ## monorepo
73+ ## monorepo 支持
7574
7675shadcn ui提供的三个 cli 命令都支持通过` --cwd ` 来指定项目的根目录，也算是支持` monorepo ` 吧。
7776
78- # cli解析
77+ ## cli解析
7978
8079shadcn 的 cli 代码基于 pnpm workspace 的结构，虽然是 monorepo 项目，但 workspace 下只有一个 cli 项目，代码目录结构还是很简洁清晰的。
8180
@@ -122,7 +121,7 @@ async function main() {
122121main ()
123122```
124123
125- ## init
124+ ### init
126125
127126` init ` 方法如下，正如` init ` 命令定义的描述那样` initialize your project and install dependencies ` ，其主要工作其实就两步：
128127
@@ -179,7 +178,7 @@ export const init = new Command()
179178 })
180179```
181180
182- ### promptForConfig
181+ #### promptForConfig
183182
184183` promptForConfig ` 方法源码如下，其主要工作就是三步：
185184
@@ -254,7 +253,7 @@ export async function getRegistryBaseColors() {
254253}
255254```
256255
257- ### fetchRegistry
256+ #### fetchRegistry
258257
259258` promptForConfig ` 内部使用的` fetchRegistry ` 方法，默认从` https://ui.shadcn.com ` 域名拉取配置，这个域名也就是shadcn ui 官方文档的域名地址。` https://ui.shadcn.com/registry/styles/index.json ` 获取一份主题配置，对应` components.json ` 的` style `
260259
@@ -280,7 +279,7 @@ async function fetchRegistry(paths: string[]) {
280279}
281280```
282281
283- ### resolveConfigPaths
282+ #### resolveConfigPaths
284283
285284` resolveConfigPaths ` 内部使用` tsconfig-paths ` 的` createMatchPath ` 方法来对` tconfig.json ` 中定义的` paths ` 字段进行解析，可以得到一个绝对路径。
286285
@@ -390,7 +389,7 @@ export declare function createMatchPath(absoluteBaseUrl: string, paths: {
390389
391390所以上面的` resolveImport ` 方法对` @/components ` ，` @/lib/utils ` 这样的相对路径，解析可以得到其绝对路径如` D:\code\tsconfig-path-test\src\components ` 。
392391
393- ### runInit
392+ #### runInit
394393
395394` runInit ` 方法负责生成` components ` ，` utils ` 等目录，以及替换` tailwind.config.ts ` 配置，并安装 shadcn ui 需要的第三方组件库依赖` tailwindcss-animate ` ，` class-variance-authority ` ，` clsx ` 等。
396395
@@ -479,7 +478,7 @@ export async function runInit(cwd: string, config: Config) {
479478}
480479```
481480
482- ### getPackageManager
481+ #### getPackageManager
483482
484483` getPackageManager ` 方法获取项目使用的依赖管理工具，这个方法非常实用，万能！
485484
@@ -518,7 +517,7 @@ export async function getPackageManager(
518517}
519518```
520519
521- ## add
520+ ### add
522521
523522` add ` 命令的实现也比较简单，其主要实现部分的源码如下，可拆解为以下四步：
524523
@@ -614,7 +613,7 @@ const add = new Command()
614613 })
615614```
616615
617- ### getRegistryIndex
616+ #### getRegistryIndex
618617
619618` getRegistryIndex ` 会默认从远端地址——https://ui.shadcn.com/registry/index.json加载一个组件`json`，这个`json`包含了 shadcn ui 所有支持的组件信息。
620619
@@ -665,7 +664,7 @@ export const registryItemSchema = z.object({
665664export const = z .array (registryItemSchema )
666665```
667666
668- ### resolveTree
667+ #### resolveTree
669668
670669在获取到远端注册的所有 shadcn ui 内部组件的信息后，` resolveTree ` 会对用户选择添加的组件进行依赖解析，得到所有需要添加到项目内部的组件信息。
671670
@@ -708,7 +707,7 @@ export async function resolveTree(
708707}
709708```
710709
711- ### fetchTree
710+ #### fetchTree
712711
713712在获取所有要添加的组件后，使用` fetchTree ` 从远端加载其源码。
714713
@@ -753,7 +752,7 @@ export async function fetchTree(
753752}
754753```
755754
756- ### transform
755+ #### transform
757756
758757在得到组件源码以后，从` components.json ` 中解析配置项` aliases.components ` ，得到项目存放组件的目录路径，然后使用` transform ` 方法对组件源码进行解析，并最终生成组件文件。
759758
@@ -826,7 +825,7 @@ export async function transform(opts: TransformOpts) {
826825}
827826```
828827
829- ## diff
828+ ### diff
830829
831830` diff ` 命令内部主要使用了[ ` diff ` ] ( https://github.com/kpdecker/jsdiff ) 对项目的组件代码和远端组件代码进行对比，然后输出到 shell 内，具体实现就不细说了，比较简单。
832831
@@ -961,40 +960,40 @@ async function buildStyles(registry: Registry) {
961960}
962961```
963962
964- # shadcn 用到的一些 nodejs 工具
963+ ## shadcn 用到的一些 nodejs 工具
965964
966- ## commander
965+ ### commander
967966
968967注册 nodejs cli 命令以及 cli 参数，以及获取 cli 输入，执行操作等。
969968
970- ## prompts
969+ ### prompts
971970
972971cli 输入交互
973972
974- ## zod
973+ ### zod
975974
976975` zod ` 是一个用于 TypeScript 和 JavaScript 的数据验证库。它允许开发者定义一个模式（schema），这个模式描述了数据应该如何结构化，以及每个字段的类型是什么。可以在 node 和 web 环境下使用。
977976
978- ## cosmiconfig
977+ ### cosmiconfig
979978
980979查找或读取` json ` ，` yml ` 等配置文件
981980
982- ## tsconfig-paths
981+ ### tsconfig-paths
983982
984983解析` tsconfig.json ` 中定义的` paths ` 的模块路径。
985984
986- ## chalk
985+ ### chalk
987986
988987cli 打印颜色文字
989988
990- ## ora
989+ ### ora
991990
992991cli loading 交互效果
993992
994- ## node-fetch
993+ ### node-fetch
995994
996995nodejs 中使用 fetch
997996
998- ## tsx
997+ ### tsx
999998
1000999支持直接在 node 命令行中执行 typescript 文件。
0 commit comments