VITE 사용방법

1단계: Vite 프로젝트 생성

앞서 설명한 대로 Vite 프로젝트를 생성합니다.
npm create vite@latest 명령어로 프로젝트 생성
프로젝트 디렉토리로 이동 (cd my-vite-app)
npm install로 의존성 설치
npm run dev로 개발 서버 실행

2단계: Turborepo 설치

npm install turbo --save-dev

3단계: Turborepo 설정 파일 생성

프로젝트 루트 디렉토리에 turbo.json 파일을 생성하고 다음 내용을 추가합니다.

{
  "pipeline": {
    "build": {
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false
    }
  }
}

pipeline

이 섹션은 다양한 파이프라인 작업들을 정의합니다. 각 작업은 특정 명령을 실행하는 방식과 캐시 설정을 포함합니다.

build

빌드 작업을 정의합니다.

dependsOn:

이 작업이 실행되기 전에 먼저 실행되어야 할 작업을 정의합니다. ^build는 루트 또는 상위 패키지의 build 작업이 먼저 실행되어야 한다는 것을 의미합니다.

outputs:

빌드 결과물의 경로를 지정합니다. .

lint

코드 스타일과 규칙 검사를 정의합니다.

dependsOn:

이 작업이 실행되기 전에 먼저 실행되어야 할 작업을 정의합니다. ^lint는 루트 또는 상위 패키지의 lint 작업이 먼저 실행되어야 한다는 것을 의미합니다.

dev

개발 서버를 실행하는 작업을 정의합니다.

cache:

false로 설정되어 있어, 이 작업은 캐시되지 않습니다. 즉, 매번 새로 실행됩니다.

persistent:

true로 설정되어 있어, 이 작업은 지속적으로 실행됩니다. 예를 들어, 개발 서버가 종료되지 않고 계속 실행됩니다.

4단계: package.json 파일 수정

프로젝트의 package.json 파일을 열어 scripts 섹션을 수정하여 Turborepo 명령어를 추가합니다.

{
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev"
  }
}

이후 빌드와 실행은

npm run dev
npm run build

로 실행합니다

5단계: 프로젝트 구조 설정

my-monorepo/
├── apps/
│ └── first-app/
│ └── second-app/
├── packages/
│ └── asseets/
│ └── components/
│ └── pages/
│ └── styles/
├── package.json
└── turbo.json
apps에는 각 프로젝트 폴더들
packages에는 프로젝트 간 공통적으로 사용되는 파일들로 정의하였고

기존 프로젝트에서 공통으로 사용되는파일들을 packages에 이동 하였습니다.

turbo.json설정

Vite 프로젝트에서는 보통 dist 디렉토리가 빌드 결과물이 저장되는 곳입니다. 따라서 Vite 프로젝트의 경로에 맞게 outputs를 설정해야 합니다.

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [
        "apps/first-app/dist/**",
        "apps/second-app/dist/**",
        "!apps/first-app/node_modules/**",
        "!apps/second-app/node_modules/**"
      ]
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

• "apps/first-app/dist/**": Vite 빌드 결과물 디렉토리를 지정합니다.
• "!apps/first-app/node_modules/**": node_modules 디렉토리는 제외합니다.

이렇게 설정하면 Turborepo가 apps/my-vite-app/dist 디렉토리에 있는 파일들을 빌드 결과물로 인식하게 됩니다.

6단계: 공통된 파일 export하기

1단계: package.json 파일 생성

root/packages/components 디렉토리 내에 package.json 파일을 생성하고 다음과 같이 작성합니다:

{
  "name": "@my-monorepo/components",
  "version": "1.0.0",
  "main": "index.js",
  "private": false
}

2단계: index.js 파일 생성

같은 디렉토리에 index.js 파일을 생성하고, 내보내고자 하는 컴포넌트를 정의합니다. 예를 들어, 기본 React 컴포넌트를 내보내는 경우:

// index.js
export { default as MyComponent } from './MyComponent';

// MyComponent.js
import React from 'react';

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

export default MyComponent;

3단계: 의존성 설치

의존성은 root/pakcage.json에서 공통으로 사용할 수 있지만
각 프로젝트마다 다르게 사용되는 의존성은 개별 프로젝트폴더에가서 설치해줍니다.

4단계: 루트 디렉토리의 package.json 설정

루트 디렉토리의 package.json 파일에 workspaces 설정을 추가하여 모노레포 환경에서 packages 디렉토리를 관리합니다.

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint"
  },
  "devDependencies": {
    "turbo": "^1.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.25.1",
    "prettier": "^2.3.2"
  }
}

5단계: 의존성 설치

컴포넌트에서 내가 만든 package.json을 root/package.json에 설치해줍니다.

cd root
npm install

6단계: 애플리케이션에서 패키지 사용

이제 애플리케이션에서 @my-monorepo/components 패키지를 사용할 수 있습니다. 예를 들어, first-app에서 사용하는 경우:

코드 복사
// apps/first-app/src/App.js
import React from 'react';
import { MyComponent } from '@my-monorepo/components';

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default App;

프로젝트 실행 및 번들

• 각 애플리케이션별 개발 서버 실행: cd my-monorepo/apps/ && npm run dev
• 각 애플리케이션별 빌드: cd my-monorepo/apps/ && npm run build
• Turborepo를 사용한 전체 프로젝트 관리:
  개발 서버 실행: cd my-monorepo && npm run dev
  빌드: cd my-monorepo && npm run build