2. Parcel.js로 타입스크립트 컴파일

1. Node 프로젝트 세팅 및 Parcel.js 세팅

npm 세팅을 위해 프로젝트 세팅을 해준다.

 

해당 프로젝트에서 터미널 호출 후 타이핑

npm init

 

프로젝트명, 버전, 라이센스 등을 정의하고 시작하자.

 

이제 parcel을 설치해줄 차례다.

 

터미널에서 아래 명령어 타이핑

npm i parcel-bundler

 

혹시 parcel.js index.html이 안된다면, npx로 실행하자.

npx는 모듈을 임시로 설치하고 실행만 하는 것이기 때문에 해당 모듈이 설치되어 있지 않아도 실행된다.

npx parcel index.html

 

그러면 번들링이 성공적으로 되고,,

dist에 완성본 파일이 담긴다.

 

dist 폴더에 있는 .js.map은

tsconfig.json에 있는 "sourceMap": true 에서 나오게 되는데,

이것은 브라우저에서 ts파일 디버깅을 편하게 해줄 수 있도록 설정하는 옵션이다.

 

이 옵션을 해놓으면 브라우저에서 ts파일을 인식해서 보여준다.

 

브라우저 내의 Sources창에서 확인할 수 있다.

브라우저에서 개발자도구에 들어간 이후에 Sources에 들어가면 app.ts를 확인할 수 있다.

이것은 바로 .js.map을 통해서 매칭해서 브라우저가 확인할 수 있는 것이다.

 

 

2. 참고할만한 글

1) Typescript map파일이란?

https://www.geeksforgeeks.org/what-is-typescript-map-file/

What is TypeScript Map file ? - GeeksforGeeks

 

끝!