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

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

次の操作は runInit 関数で実行されます:

1. 解決されたパス ディレクトリがすべて存在することを確認します。
2. 追い風の設定を書き込みます。
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 {
  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.

@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

メール: [email protected]

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 { 検出 } from "@antfu/ni"&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus