[javascript] Parcel에서 Typescript를 사용하는 방법은?
-
먼저, 프로젝트 폴더로 이동하고
npm init
명령어를 실행하여 새로운 npm 프로젝트를 초기화합니다. -
TypeScript를 설치합니다. 터미널에서 다음 명령어를 실행하세요.
npm install --save-dev typescript
- TypeScript 설정 파일
tsconfig.json
을 생성합니다. 프로젝트 루트 디렉토리에tsconfig.json
파일을 생성하고 아래의 내용을 추가합니다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "dist",
"strict": true
},
"include": [
"src/**/*"
]
}
여기서 "outDir"
은 컴파일된 TypeScript 파일의 출력 디렉토리를 정의합니다. 이 예제에서는 dist
폴더를 사용하도록 설정했습니다. "include"
은 컴파일할 TypeScript 파일을 지정하는 패턴입니다. src
폴더의 모든 파일을 컴파일하도록 설정했습니다.
-
TypeScript 파일을 작성합니다.
src
폴더에.ts
확장자를 가진 TypeScript 파일을 만들고 코드를 작성합니다. -
package.json
파일에서"scripts"
객체에 빌드 스크립트를 추가합니다. 다음과 같이"scripts"
객체를 수정합니다.
{
"name": "my-parcel-typescript-project",
"version": "1.0.0",
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"devDependencies": {
"parcel": "^2.0.0"
}
}
여기서 "start"
스크립트는 개발 서버를 실행합니다. "build"
스크립트는 프로덕션 빌드를 수행합니다.
- Parcel을 실행하여 TypeScript 파일을 빌드합니다. 터미널에서 다음 명령어를 실행하세요.
npm run build
Parcel은 TypeScript 파일을 자동으로 컴파일하고 번들링하여 dist
폴더에 결과물을 생성합니다.
이제 Parcel에서 TypeScript를 사용하는 준비가 되었습니다. TypeScript 파일을 작성하고 npm start
명령어를 실행하여 개발 서버를 시작할 수 있습니다.