번들러
번들러는 의존성이 있는 모듈 코드를 하나(또는 여러 개)의 파일로 만들어주는 도구이다. 브라우저 환경에서는 CommonJS나 일부 ES6 Module로 작성된 코드(크롬과 같은 최신 브라우저에서는 ES6 Module을 지원한다)는 바로 실행할 수가 없으므로 모듈 코드를 분석하고 자바스크립트 모듈 스펙에 따라 새로운 코드로 가공이 필요하다. 브라우저 환경에서 잘 실행될 수 있도록 가공해주는 것이 번들러의 역할이다. 대표적인 번들러로 RequireJS, Browserify, Rollup, Parcel 등이 있으며, 현재는 webpack이 각광받고 있다.
-> 번들러는 의존성이 있는 모듈들을 하나 혹은 여러 개의 파일로 만들어준다.
-> 위의 작업을 할 때 개발자가 작성한 코드를 모든 브라우저 환경에 호환되도록 브라우저에 맞는 문법으로 가공한다.(es6 이하)
-> 여러 번들러가 있는데 현재 webpack이 가장 많이 쓰인다.
등장 배경?
위의 정의에서 '의존성이 있는 모듈들'이라고 했다. 번들러는 이 모듈들이 생겨나기 시작하면서 함께 나타났다.
이전에는 웹 사이트를 만들기 위해 필요한 것이 html, css, js 뿐이어서 파일 관리가 크게 복잡하기 않았지만, 새로운 프레임워크가 점점 나오면서 웹 사이트를 만들기 위해 필요한 파일들이 많아졌다.
'모듈'은 파일들을 기능별로 나눈 것인데, 서로 의존성이 0인 경우는 거의 없을 것이다. 이렇게 서로 의존하고 있는 모듈들을 개발자가 한 파일로 묶기란 상당히 번거롭고 어려운 작업이다.
- 한 파일로 묶는 이유?
브라우저가 수백 개의 파일들을 각각 따로 요청하고 응답을 받는 경우 응답을 제때 받지 못하는 네트워크 병목현상이 나타날 수 있다. 이를 피하기 위해 여러 js파일들을 하나의 js파일로, 여러 css파일들을 하나의 css파일로 묶는 작업이 필요한 것이다.
이것을 해결하기 위해 번들러가 등장했고, 개발자는 유지보수를 놓치지 않으면서 최적의 성능도 낼 수 있게 되었다.
Babel
Babel is a JavaScript compiler.
js는 인터프리터 언어이다. 왜 컴파일러가 필요할까?
바벨은 js -> js이다. 소스 대 소스 컴파일러(transpiler)라고 한다.
무엇을 변환하나?
개발자가 작성한 es6 이상의 최신 문법들을 브라우저가 이해할 수 있도록 구버전으로 바꿔준다. 또 react의 jsx 문법을 바닐라 js로 바꿔주기도 한다.
그럼 여기서 의문이 생긴다. 아까 웹팩도 브라우저가 이해할 수 있게 코드를 바꿔준다 하지 않았나?
맞다.
웹팩이 파일들을 빌드할 때 앞서 말한 jsx, js를 transfile하기 위해 babel을 사용한다.
웹팩의 기능 중 transfile을 babel이 맡아서 하는 것이다.
