공청
개발하는 금융인
공청
전체 방문자
오늘
어제
  • 분류 전체보기 (102)
    • 개인적인 이야기 (27)
    • IT에 관한 글 (15)
    • 경제, 금융 (12)
    • Python (2)
    • Javascript (6)
    • golang (2)
    • 비전공자를 위한 IT 지식 (0)
    • SQL (SQLD,SQLP) (1)
    • React (Front-end) (29)
    • 정보처리기사 (0)
    • Typescript (4)
    • (study) 모던 자바스크립트 Deep Dive (0)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 방명록
  • 글쓰기

공지사항

인기 글

태그

  • vscode
  • Effective Typescript
  • 기술스택
  • python
  • vite
  • 웹개발
  • 트래블카드
  • next.js
  • WSGI
  • Fira Code
  • 트래블월렛
  • 창업
  • react
  • approute
  • 짧은생각
  • Golang
  • 미국주식
  • javascript
  • HTTP
  • typescript
  • 인터넷
  • go
  • 조건부렌더링
  • 프로그래밍
  • useref
  • react-router
  • ChatGPT
  • 일기
  • 언섹시비즈니스
  • sql

최근 댓글

최근 글

티스토리

반응형
공청

개발하는 금융인

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

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

2022. 12. 25. 23:16

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

"블로그 내의 광고와 쿠팡 링크를 클릭해주시면 블로그 운영에 큰 힘이 됩니다."

반응형

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

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

www.geeksforgeeks.org

 

끝!

반응형
    'Typescript' 카테고리의 다른 글
    • (Effective Typescript) 이펙티브 타입스크립트 스터디 시작!
    • 1. 타입스크립트(Typescript) 세팅하기 - tsconfig.json
    • 0. Hackers News 자바스크립트 코드 타입스크립트로 마이그레이션 시작
    공청
    공청
    투자, 프로그래밍, IT에 대한 글을 씁니다.

    티스토리툴바