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

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은 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/

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