shadcn-ui/ui 코드베이스 분석: shadcn-ui CLI는 어떻게 작동하나요? — 5부

shadcn-ui CLI가 어떻게 작동하는지 알고 싶었습니다. 이 글에서는 shadcn-ui/ui CLI를 구축하는 데 사용되는 코드에 대해 설명합니다.

2.11편에서는 runInit 함수와 shadcn-ui/ui가 config의 해결된 경로에 제공된 디렉터리가 존재하는지 확인하는 방법을 살펴보았습니다.

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 명령을 실행할 때 "종속성 설치 중..." 메시지를 표시하는 데 사용됩니다.

getPackageManager

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는 올바른 패키지 관리자를 사용할 수 있게 해주며, detector는 cwd를 기반으로 특정 프로젝트에 사용되는 packageManager를 제공하는 기능입니다.

@antfu/ni Github readme에서 감지 방법에 대해 언급된 내용을 찾을 수 없습니다. 일부 오픈 소스 코드베이스에서 읽지 않으면 그러한 메소드가 존재하는지 어떻게 알 수 있습니까?

엑세카

Execa는 스크립트, 애플리케이션 또는 라이브러리에서 명령을 실행합니다. 쉘과 달리 프로그래밍 방식으로 사용하도록 최적화되어 있습니다. child_process 핵심 모듈 위에 구축되었습니다. 전설적인 신드레 소르후스(Sindre Sorhus)가 건설한 곳입니다

shadcn-ui/ui CLI는 execa를 사용하여 npx shadcn-ui init 명령의 일부로 필요한 종속성을 설치합니다.

결론

shadcn-ui CLI는 전설적인 Sindre Sorhu가 구축한 execa를 사용합니다. Execa는 스크립트 파일에 필요한 종속성을 설치하는 데 사용됩니다. 우리 모두는 설치 명령 실행에 익숙하지만 프로그래밍 방식으로 스크립트에 일부 패키지를 설치하려는 경우 execa를 사용할 수 있습니다.

shadcn-ui CLI는 @antfu/ni의 "감지" 방법을 사용하여 프로젝트에 사용된 패키지 관리자를 감지합니다.

이 기사는 npx shadcn-ui init 명령을 완료했을 때 내부적으로 어떤 일이 일어나는지 연구하고 배우려는 나의 탐구를 표시합니다.

add 명령어 공부로 넘어갑니다.

shadcn-ui/ui를 처음부터 만드는 방법을 배우고 싶으십니까? 처음부터 새로 만들기

확인해 보세요.

나에 대해:

홈페이지: https://ramunarasinga.com/

링크드인: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!