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

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、4 はパート 2.12、2.13、および 2.14 で説明されています。「依存関係のインストール」操作がどのように行われるかを見てみましょう。

依存関係をインストールする

以下のコード スニペットは cli/src/commands/init.ts から抜粋されています

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

ora はエレガントなターミナル スピナーであり、npx shadcn init コマンドを実行するときに「依存関係をインストールしています…」というメッセージを表示するために使用されます。

getパッケージマネージャー

getPackageManager は、packages/cli/src/utils/get-package-manager.ts からインポートされます

import { detect } from "@antfu/ni"

export async function getPackageManager(
  targetDir: string
): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
  const packageManager = await detect({ programmatic: true, cwd: targetDir })

  if (packageManager === "yarn@berry") return "yarn"
  if (packageManager === "pnpm@6") return "pnpm"
  if (packageManager === "bun") return "bun"

  return packageManager ?? "npm"
}

pnpm プロジェクトで npm を使用したことがありますか? pnpm プロジェクトで npm を使用しているため、パッケージのインストールに失敗します。

@antfu/ni を使用すると、適切なパッケージ マネージャーを使用でき、cwd に基づいて特定のプロジェクトで使用される packageManager を提供する関数を検出できます。

@antfu/ni Github readme には detect メソッドについて言及されたものが見つかりません。オープンソースのコードベースで読まない限り、そのようなメソッドの存在をどうやって知ることができるでしょうか?

エグゼカ

Execa は、スクリプト、アプリケーション、またはライブラリ内のコマンドを実行します。シェルとは異なり、プログラムによる使用に最適化されています。 child_process コア モジュールの上に構築されます。これは伝説のシンドレ・ソルフスによって建てられました

shadcn-ui/ui CLI は、execa を使用して、npx shadcn-ui init コマンドの一部として必要な依存関係をインストールします。

結論

shadcn-ui CLI は、伝説の Sindre Sorhu によって構築された execa を使用します。 Execa は、必要な依存関係をスクリプト ファイルにインストールするために使用されます。インストール コマンドの実行には誰もが慣れていますが、プログラムでスクリプト内のパッケージをインストールしたい場合は、execa を使用できます。

shadcn-ui CLI は、@antfu/ni の「detect」メソッドを使用して、プロジェクトで使用されているパッケージ マネージャーを検出します。

この記事は、npx shadcn-ui init コマンドを完了したときに実行したときに内部で何が起こっているのかを研究して学ぶという私の探求を示しています。

add コマンドの学習に進みます。

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#L382
2. https://www.npmjs.com/package/ora
3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-package-manager.ts#L3
4. https://www.npmjs.com/package/@antfu/ni
5. https://github.com/antfu-collective/ni#readme
6. https://github.com/search?q=import+%7B+detect+%7D+from+%22%40antfu%2Fni%22&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus

以上がshadcn-ui/ui コードベース分析: shadcn-ui CLI はどのように機能しますか? — パート 5の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。