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

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

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를 가져온 패키지/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를 기반으로 특정 프로젝트에 사용되는 packageManager를 제공하는 기능입니다.

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

엑세카

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

이메일: [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 "@antfu/ni"&type=code에서 { 감지 }
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus