본문 바로가기
Tool

Parcel - 웹 애플리케이션 번들러

seungwoo_h 2018. 6. 23. 22:59



최근에 다른 개발자분의 블로그글을 보다가 parcel 라는 웹앱 애플리케이션 번들러를 알게 되었습니다.

저는 '기존에 많이 사용하던 Webpack이나 Gulp와 다르게 별도 설정 없어도 빠르게 빌드가 가능합니다.'


이 말때문에 Parcel이라는 번들러에 관심이 생겨 저도 한 번 Parcel이라는 번들러에 대해서 알아보기로 했습니다.


PACEL의 Document page에 들어가면 


Parcel[파설, /parsəl/]은 개발 경험에서 차이를 느낄수 있는 웹 애플리케이션 번들러 입니다. 멀티코어 프로세싱으로 불꽃 튀게 빠른 성능을 제공하고 그 어떤 설정도 요구하지 않습니다.


Parcel에 대한 정의가 나옵니다. "어떤 설정도 요구하지 않는다" 라는 말이 매우 매혹적이게 느껴졌습니다.

그럼,  시작 해보겠습니다.



시작 하기


일단 parcel-bundler를 테스트 해 볼 parcel-tutorial이라는 폴더를 하나 만들었습니다.

그리고 parcel-bundler를 설치해 줍니다.


설치는 Yarn 이나 npm으로 설치 할 수 있습니다. 저는 npm로 설치하기로 했습니다.


우선, 

$ npm init -y
위 명령줄을 실행하여 package-json 파일을 생성해 줍니다.

$ npm install parcel-bundler -D

글로벌로 설치 해도 되지만 저는 프로젝트 안에 설치 하기로 했습니다.


그리고 나서 index.html, index.js, style.css 파일을 만들어 줍니다.

  
  <!-- index.html -->
  <html>
    <head>
      <script src="./assets/js/index.js"></script>
      <link rel="stylesheet" href="./assets/css/style.css">
      <title>Parcel test</title>
    </head>
    <body>
      <h2 class="txt-title">Parcel-bundler Tutorial</h2>
      <p>Author: Seungwoo Hong</p>
    </body>
  </html>

// index.js
(function() {
console.log('Hellow Parcel !!');
})();



/* style.css */
.txt-title {
color: goldenrod;
}


directory structure는 다음과 같습니다.



parcel을 이용해서 serve 해보겠습니다.


parcel index.html

parcel은 assets 기반의 번들러 이고 어떤 유형의 파일도 가능하지만 javascript 와 css, html 파일을 중심적으로 다양한 지원을 합니다.

pacel은 하나의 파일을 받아서 연결된 모든 파일을 알아서 번들링 해줍니다.


위 명령줄을 입력하고 localhost:1234(기본 포트: 1234)로 접속 해보십시오. 

만약 포트를 변경해주고 싶다면 -p 플래그를 사용하여 지정해 줄 수 있습니다.

parcel index.html -p 5005


정상적으로 잘 동작 했다면 기본 output directory인 dist 폴더가 생성됩니다.



이렇게 작동 되는 것을 확인 하실 수 있습니다.




[Reference] 

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

https://parceljs.org/getting_started.html



티스토리툴바