얼마전에 browserslist(지원 가능한 브라우저 설정)에 대해 알아보면서 webpack과 babel에서는 이 프로그램이 사용될 것이라고 생각했다.
그래서 babel과 webpack에 대해 간단하게 정리하면서 어떻게 사용되는 지 함께 확인해보려고한다.
babel : Babel is a JavaScript compiler
JavaScript는 항상 새로운 버전이 출시되기때문에 브라우저가 항상 그 문법을 대응할 수는 없다. 혹여 브라우저가 빠르게 대응한다고 하더라도, 사용자가 최신 브라우저를 사용할 것이라는 보장도 없다. 그러므로 브라우저가 최신 문법을 이해하도록 만들어야하는데 이때 사용할 수 있는 도구가 Compile이고, 이 역할을 하는 JavaScript 라이브러리가 바벨이다.
babel docs 첫 페이지에도 이러한 예시가 나온다.
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);
// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
return n + 1;
});이렇듯 babel은 주어진 language로 작성된 컴퓨터 프로그램을 다른 언어의 동등한 프로그램으로 변환하는( = 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는)도구이며 이 도구를 이용해 우리는 브라우저에 원하는 방식으로 결과물을 보여줄 수 있다.
babel에서의 browserslist
babel은 문법을 javascript(ECMAScript 2015)버전으로 변환하는 역할만 하기 때문에 ES5 이하를 지원하는 브라우저에서는 Promise나 Set, Array.prototype.includes 등과 같은 문법을 읽어낼 수 없다. 따라서 브라우저에서 기본적으로 지원하지 않는 최신 기능을 제공하는 데 필요한 코드(폴리필)의 사용 여부 등 브라우저의 환경에 따라 입력받아야하는 내용이 달라지기 때문에 이때 browserslist가 사용된다.
Webpack : 모듈번들러
- 모듈번들러
클라이언트가 웹 페이지에 진입하면 그 페이지에 있는 JavaScript 파일들이 화면에 구성되면서 화면에 보이게된다. 이 과정에서 자주 사용되는 파일들은 js 파일을 통해 모듈로 만들어서 관리를 하는데, 파일의 크기가 클수록 그 모듈들이 많아지고, 그 모듈들을 페이지를 로드할 때마다 불러오게 된다면 사용자 경험에 좋지 않은 영향을 준다.
그래서 이 문제를 해결하기 위해 많은 모듈들을 하나의 파일로 묶어서 제공하면 사용자가 요청하는 파일의 수는 적어지기 때문에 사용자 경험도 개선된다.
모듈을 하나로 묶는 작업을번들링이라 하고, 여러 개의 파일을 하나로 묶어주는 도구가모듈 번들러이다.
Webpack에서의 browserslist -> webpack 공식 문서
Webpack은 browserslist 설정을 재사용하여 모듈로 내보낼 코드 스타일을 결정한다.
browserslist 설정이 없으면 target에 'browserslist' 혹은 'web'으로 설정한다고 한다.
target - 특정 환경에 대한 런타임 코드를 생성하도록 webpack에 지시
[참고]
https://happysisyphe.tistory.com/49
https://bravenamme.github.io/2020/02/12/what-is-babel/
https://velog.io/@hozzijeong/WebPack%EA%B3%BC-Babel-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Polyfill%EC%97%90-%EB%8C%80%ED%95%B4
