shadcn-ui/ui コードベース分析: shadcn-ui CLI はどのように機能しますか? — パート 4

shadcn-ui CLI がどのように機能するかを知りたかったのです。この記事では、shadcn-ui/ui CLI の構築に使用されるコードについて説明します。

パート 2.11 では、runInit 関数と、shadcn-ui/ui が構成内のresolvedPaths で指定されたディレクトリが存在することを確認する方法について説明しました。

次の操作は 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 中国語 Web サイトの他の関連記事を参照してください。