Vite

Node.js

# Node.js 버전 확인
➜ node -v
v20.9.0

# v20.9.0 가 설치되어 있지 않다면
➜ nvm install 20.9.0

# v20.9.0 를 사용하고 있지 않다면
➜ nvm use 20.9.0

# Node.js 버전 다시 확인
➜ node -v
v20.9.0

npm

# npm 버전 확인
➜ npm -v
10.2.1

# 최신 버전 npm 으로 업그레이드 
➜ npm i [email protected] -g

# npm 버전 다시 확인
➜ npm -v
10.2.1

pnpm

# pnpm 설치 확인 및 버전 확인
➜ pnpm -v
8.10.0

# 최신 버전 pnpm 으로 업그레이드 
➜ npm i [email protected] -g

# pnpm 설치 다시 확인 및 버전 다시 확인
➜ pnpm -v
8.10.0

Root 프로젝트 생성

➜ mkdir vite-example

➜ cd vite-example

➜ pnpm init

➜ corepack use [email protected]

➜ code

워크스페이스 설정

# vite-example/pnpm-workspace.yaml

packages:
  - "packages/*"
  - "apps/*"

템플릿으로부터 my-app 생성

➜ mkdir apps

➜ cd apps

➜ pnpm create vite@latest my-app --template react-swc-ts

➜ cd ..

➜ pnpm i

개발 서버 실행

➜ pnpm --filter my-app dev

Screenshot 2023-11-06 at 1.26.38 AM (3).png

커맨드 확인

// vite-example/apps/my-app/package.json
{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  **"scripts": {
    // 개발 서버를 실행합니다. (`vite dev` 또는 `vite serve`로도 시작이 가능합니다.)
    "dev": "vite",
    // 배포용 빌드 작업을 수행합니다.
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    // 로컬에서 배포용 빌드에 대한 프리뷰 서버를 실행합니다.
    "preview": "vite preview"
  },**
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  },
  "packageManager": "[email protected]+sha1.77d568bacf41eeefd6695a7087c1282433955b5c"
}

진입점: index.html

// vite-example/apps/my-app/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    **<script type="module" src="/src/main.tsx"></script>**
  </body>
</html>