Bundler

1.개요

ECMAScript는 2015년 이후로 매년 최신문법이 나오고 있습니다. 따라서 구버전의 브라우저에서도 최신 문법이 적용될 수 있도록 polyfill작업을 해주어야합니다. 이 때 사용되는 번들러를 사용을 합니다.

대표적인 번들러로는 Parcel외에도 Webpack, Rollup 등의 여러 종류가 있습니다. 특히 Webpack이 많이 사용이 되고 있습니다.

2. 번들러란?

웹에서는 기본적으로 html, css, JS 세가지가 동작을 합니다. 하지만 순수하게 이 셋만을 가지고 코딩을 하기에는 조금 비효율적인 부분이 있습니다.

그렇기에 Vue.js, REACT, sass 등의 다양한 기능을 통해 실제로 코딩을 하고 프로젝트를 제작합니다. 하지만 이러한 기능들이 웹에서 직접적으로 동작을 하지는 않기에 번들러를 통해 html, css, JS로의 변환하는 과정을 거쳐서 웹에서도 동작할 수 있도록 만듭니다.

물론, 번들러 자체가 이러한 모든 기능들을 바꿀 수 있는 역할을 하는 것은 아닙니다. 예를 들어 이전에 parcel이라는 번들러를 통해서 scss를 css로 변환할 때 sass라는 외부 패키지를 설치해 이용을 했습니다. 외부패키지로 직접적인 수동의 작업을 해야하는 부분을 번들러를 통해 HTML,css,JS로 변환을 해서 서로를 묶어내고 그것이 웹에서 동작할 수 있는 형태로 변환시키는 작업까지 해낸 것입니다.

결론적으로는 우리는 다양한 기능을 가지고 있는 여러가지 패키지들을 통해 프로젝트를 제작할 수 있으며, 그것들을 번들러를 통해서 처리를 할 때 필요한 외부의 패키지들을 연결을 해줘야지만 실제로 HTML, CSS, JS로 변환이 되어서 웹에서 동작을 할 수 있습니다.

3. Parcel vs webpack

3-1. Parcel

parcel 번들러는 별도의 구성 없이 번들러만 사용을 하면 대부분의 내용이 자동화되어 동작을 합니다. 그렇기 때문에 굉장히 편리합니다. 하지만 webpack번들러 대비 구성이 꼼꼼하지는 않아 프로젝트의 규모가 커지다 보면 아쉬움이 많이 느껴질 수 있습니다. 따라서 parcel번들러의 경우 소/중형 프로젝트에 적합하다고 할 수 있습니다.

3-2. Webpack

webpack 번들러는 매우 자세하게 번들링을 할 수 있는 옵션들을 설정해줄 수 있습니다. 그렇기 때문에 조금 더 규모 있는 프로젝트를 우리 입맛에 맞게 정리를 해낼 수 있습니다. 대신에 너무 디테일한 옵션들을 다 제공하다보니깐 우리가 확인해야할 내용들이 많아집니다. 그렇기 때문에 소형프로젝트 보다는 중/대형 프로젝트에 적합하다고 할 수 있습니다.