首頁 > 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學習者快速成長!