Webpack, Babel, Polyfill

이것들은 리액트, express js, typescript 기반인 3차 프로젝트 진행할 때 알게 모르게 썼었던 거다.

리액트랑 타입스크립트 깔면 자연스럽게 들어가있는 느낌으로 알고 있었는데 이참에 정리하면 좋을 것 같아서 써본다.

Saas loader를 설치했을 때 높은 webpack버전이 npm에 새롭게 설치되어서 react에서 default로 설치되어있던 webpack 4.xx버전과 충돌이 났었던 기억이 있다.

 

 

Polyfill: 브라우저가 지원하지 않는 자바스크립트 문법을 지원 가능하도록 변환한 코드

(ex. type script를 js로 변환, ES 6 에서 도입된 함수를 ES 5만 지원하는 브라우저에서 사용할 수 있게끔 ES 5문법을 이용해서 함수를 만들어주는 것)

자바로 설명하자면 만약에 17버전에서 쓸 수 있는 Stream.toList()가 있다고 하면 이를 11버전만 돌아가는 브라우저에서 돌릴 때는 List를 새로 만들고 Stream.foreach(e-> List.append(e)) 정도로 바꿔주는 게 되려나..?

 

Babel: ES6 이상 버전의 JSX(js 내부에서 html 이용할 수 있는 언어) 코드를 대부분의 브라우저가 지원하는 ES5로 바꿔주는 컴파일러

(그러니까 Babel에는 Polyfill도 포함이 된다.)

 

Webpack: 웹에서 사용되는 모든 모듈(js, css, 이미지 등)을 번들링(build) 해서 하나로 묶어주는 도구 (여러 개의 폴더와 파일에 있는 모듈을 하나의 app.js 파일로 묶어주는 것) 한 파일로 묶었기 때문에 성능이 개선된다.