타입 스크립트 - Parcel, Vite

김영준·2023년 7월 29일

TIL

목록 보기

30/90

타입 스크립트 프로젝트를 Parcel 번들러를 통해 구성

npm 프로젝트 생성

npm init -y

타입 스크립트와 parcel 설치

npm i -D typescript parcel

package.json에 dev와 build 명령어 추가

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel ./src/index.html",
    "build": "parcel build ./scr/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.9.3",
    "typescript": "^5.1.6"
  }
}

tsconfig.json 작성

{
  "compilerOptions": {
    "strict": true
  },
  "include": ["./src/**/*.ts"]
}

Parcel을 사용하기 위해서 script에 type="module"을 꼭 작성해야 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>타입 스크립트</title>
    <script type="module" defer src="./main.ts"></script>
  </head>
  <body>
    <h1>Hello Parcel!</h1>
  </body>
</html>

eslint와 prettier 설치

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

vercel 서비스를 이용할 경우 package.json에 "main": "index.js"삭제 후 "type": "module" 추가

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "scripts": {
    "dev": "parcel ./src/index.html",
    "build": "parcel build ./scr/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.1.0",
    "@typescript-eslint/parser": "^6.1.0",
    "eslint": "^8.45.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^5.0.0",
    "parcel": "^2.9.3",
    "prettier": "^3.0.0",
    "typescript": "^5.1.6"
  }
}

eslint 구성 내용을 작성하기 위해 루트 경로에 .eslintrc.json 작성

{
  "extends": [
    "eslint: recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser"
}

루트 경로에 프리티어 파일 .prettierrc 작성

{
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf"
}

그 후 vscode 익스텐션에서 eslint와 prettier 설치가 됐는지 확인

코드를 저장할 때 자동적으로 적용되기 위해서 루트 경로에 .vscode 폴더 생성 후 내부에 settings.json 파일 작성

{
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

타입 스크립트 프로젝트를 Vite.js 빌드 도구를 통해 구성

Vite.js란?

웹 개발을 위한 빠르고 간단한 빌드 도구이다. 기존의 웹 개발 도구들과 비교하여 빌드 시간과 개발 환경 구축 속도를 향상시킨 것이 주요 특징이다.

Vite.js의 특징

빠른 개발 서버: Vite.js는 빠른 개발 서버를 제공하여 빠른 환경에서 개발할 수 있습니다. 개발 시에는 기본적으로 빌드 없이 원래 소스 코드를 실행합니다.
최적화된 빌드: 빌드 시간을 최소화하고 개발 환경에서의 성능을 유지하는 것에 중점을 두고 있습니다.
단일 파일 컴포넌트: Vue.js의 단일 파일 컴포넌트 형식을 사용하여 컴포넌트 기반 개발을 쉽게 지원합니다.
Hot Module Replacement (HMR): 코드 수정 시 자동으로 페이지를 새로 고치지 않고도 변경된 부분만 반영하여 개발 속도를 높여줍니다.
다양한 프레임워크 지원: Vue.js뿐만 아니라 다른 프레임워크와도 함께 사용할 수 있습니다.
Vite.js는 빠른 개발 환경과 향상된 개발 경험을 제공하며, 모던 웹 애플리케이션 개발에 적합한 선택지 중 하나입니다.