당신이 모를 수도 있는 `create-vite` CLI의 멋진 3가지
Source: Dev.to
한눈에 보기
모든 것은 src/index.ts 파일의 init 함수에서 시작됩니다.
CLI는 다음 여섯 단계로 진행됩니다:
- 프로젝트 이름과 대상 디렉터리를 가져오거나(묻거나) 입력받습니다.
- 디렉터리가 존재하고 비어 있지 않을 경우 이를 처리합니다.
- (1단계에서 얻은 프로젝트 이름이 유효한 NPM 패키지 이름이 아닌 경우) 유효한 패키지 이름을 얻습니다.
- 사용자에게 프레임워크와 변형을 선택하도록 요청합니다.
- 즉시 설치를 원하는지 물어봅니다.
- 폴더와 파일을 스캐폴딩합니다.
CLI에 세련된 경험을 제공하는 핵심 라이브러리:
mri– CLI 인자를 파싱합니다.@clack/prompts– 매력적인 인터랙티브 프롬프트를 렌더링합니다.picocolors– 콘솔 출력에 색상을 추가합니다.
전체적으로 create‑vite는 직관적이고 간단한 도구이지만, 구현에는 몇 가지 흥미로운 세부 사항이 포함되어 있습니다.
Cool thing 1 – 모든 CLI 플래그
문서에 명시된 --template 플래그 외에도 create‑vite는 여러 가지 플래그를 지원합니다:
| 플래그 | 설명 |
|---|---|
--overwrite / --no-overwrite | 대상 디렉터리가 비어 있지 않을 경우 덮어씁니다. |
--immediate / --no-immediate | 스캐폴딩 후 바로 설치를 실행하고 개발 서버를 시작합니다. |
--interactive (-i) / --no-interactive | 사용자에게 입력을 요청하거나 기본값을 가정합니다. 기본 템플릿은 vanilla‑ts이며, overwrite와 immediate는 기본값이 false입니다. 비대화형 모드는 CI/CD 파이프라인이나 AI 에이전트가 명령을 실행할 때 유용합니다. |
사용 가능한 템플릿 이름
--template에 다음 문자열 중 하나를 전달할 수 있습니다:
// vanilla
"vanilla-ts",
"vanilla",
// vue
"vue-ts",
"vue",
"custom-create-vue",
"custom-nuxt",
"custom-vike-vue",
// react
"react-ts",
"react-compiler-ts",
"react-swc-ts",
"react",
"react-compiler",
"react-swc",
"rsc",
"custom-react-router",
"custom-tanstack-router-react",
"redwoodsdk-standard",
"custom-vike-react",
// preact
"preact-ts",
"preact",
"custom-create-preact",
// lit
"lit-ts",
"lit",
// svelte
"svelte-ts",
"svelte",
"custom-svelte-kit",
// solid
"solid-ts",
"solid",
"custom-tanstack-router-solid",
"custom-vike-solid",
// ember
"ember-app-ts",
"ember-app",
// qwik
"qwik-ts",
"qwik",
"custom-qwik-city",
// angular
"custom-angular",
"custom-analog",
// marko
"marko-run",
// others
"create-vite-extra",
"create-electron-vite"멋진 기능 2 – AI 에이전트 “지원”
create‑vite는 @vercel/detect-agent 를 사용하여 AI 에이전트가 CLI를 호출했는지 확인합니다. 에이전트가 감지되고 인터랙티브 모드가 활성화된 경우, CLI는 비인터랙티브 실행을 제안하는 유용한 메시지를 출력합니다:
create-vite --no-interactive --template <template-name>멋진 기능 3 – 몇 가지 코딩 기법
npm_config_user_agent 로 패키지 매니저 결정하기
CLI는 npm_config_user_agent 환경 변수를 읽어 사용자가 어떤 패키지 매니저로 실행했는지 추론할 수 있습니다. 예를 들어 pnpm을 사용할 경우 전체 에이전트 문자열을 확인할 수 있습니다:
pnpm config get user-agent
# pnpm/10.20.0 npm/? node/v20.11.1 linux x64그 후 코드는 이 문자열을 분할해 패키지 매니저 이름을 추출합니다(소스 파일 777번째 줄 구현 참고).
stdin이 TTY인지 감지하기
process.stdin.isTTY는 표준 입력이 터미널에 연결되어 있는지를 CLI에 알려줍니다. 입력이 파이프될 때(예: cat data.txt | xargs pnpm create-vite) isTTY는 false가 되며, 이 경우 인터랙티브 프롬프트가 비활성화됩니다.
Ctrl‑C(취소)를 우아하게 처리하기
각 프롬프트 후에 코드는 사용자가 작업을 취소했는지 확인하고, 취소된 경우 친절한 메시지를 출력하고 정상적으로 종료합니다:
if (prompts.isCancel(projectName)) return cancel();@clack/prompts 작성자는 이 패턴을 권장하며, 실제 프로덕션 코드베이스에서 이를 보는 것은 그 중요성을 다시 한 번 강조합니다.