프론트엔드 로드맵 32 - 모듈번들러 ParcelJS

 

앞서 설명한 Webpack과 Rollup 그리고 이번엔 Parcel이다.

 

프론트엔드 로드맵 31 - 모듈번들러 Rollupjs

프론트엔드 로드맵 30 - 모듈번들러 Web pack

모듈번들러의 기능에 대한 소개는 앞서 했으니 생략하고.

이 Parcel은 2017년 등장한 뉴비로써 webpack이나 gulp와 달리 별도 설정 없이도 바로 Build가 가능하기 때문에 번들링 속도가 빠르다. 또 별도의 패키지 다운로드없이 Babel과 PostCSS 등의 기능들이 내장되어 자동 변환 해준다.

import() 함수를 이용해 코드 분할한다.

 

<설치방법>

$ npm install -g parcel-bundler  //npm으로 설치할 때 $ yarn global add parcel-bundler  //yarn으로 설치할 때

 

$npm init 으로 package.json을 만들어준 뒤

index.html에 <script src="./src/main.js"></script> 로 js파일 불러오기

 

//main.js

require('./main.css'); // css파일 불러오기

 

$parcel index.html

위 명령어로 파일만 선택해주면 페이지가 빌드된다.

sass, postCSS, babel 등도 같은 방식으로 이용 가능하다.

 

한국어로도 설명이 잘 나와있으니 꼼꼼히 읽으며 공부해도 좋겠다.

 

참고 사이트 : https://ko.parceljs.org/getting_started.html

https://heropy.blog/2018/01/20/parcel-1-start/