[카카오테크캠퍼스 5주차] JavaScript 마스터: Parcel

⏳ 2023. 5. 8. - 2023. 5. 14.

 

익스텐션으로 사용했던 Live Server는 실제 개발할 때는 활용도가 낮다.

이제부터는 parcel이라는 번들러를 통해 개발 서버를 오픈하자!

 

서버 실행과 빌드

개발 서버 실행하기

package.json의 scripts 부분을 원하는 명령어로 수정하고,

npm run <정한 명령어>를 통해 parcel 개발 서버를 실행할 수 있다.

type="module"

import _ from "lodash";

console.log(_.upperCase("hello-world"));

import라는 키워드를 사용하는 js 파일은 모듈이라는 개념으로 불린다.

html에 script 파일을 연결할 때 type="module" 값을 줘야 에러가 없다.

빌드

개발 서버가 아닌 제품용으로 빌드하게 되면

이와 같이 난독화된 코드를 볼 수 있다.

 

사람이 해석하기 위한 코드가 아닌, 브라우저에서 동작하기 위한 코드로 불필요한 것들이 모두 제거된 상태라고 할 수 있다.

---

dist

html, css, js만 이해하는 브라우저는 TypeScript로 작성된 코드를 읽을 수 없다.

그러나 작업의 효율을 위해 ts로 개발을 해야할 때가 있는데,

parcel이 이러한 코드를 브라우저가 이해하는 언어로 변환하여 브라우저에서 동작할 수 있게 한다.

 

그럼 변환된 코드는 어디에 저장되느냐?

dist라는 폴더에 변환된 결과가 저장된다.

배포할 때는 이렇게 만들어진 결과들만 배포하면 된다!