폴리필, 바벨, 웹팩 정의와 차이

폴리필, 바벨, 웹팩 정의와 차이

 

바벨(babel)

트랜스파일러(transpiler). 브라우저가 ES6 문법을 이해하지 못하기 때문에 하위 브라우저가 지원하는 ES5이하 문법(syntax, feature)으로 변경

- ex) const -> var로 변경, arrow function -> function expression으로 변경

- core-js: babel 내부의 library. ES6 이후 문법들을 폴리필 처리한다.

- 바벨 프리셋: 함께 사용되어야 하는 babel 플러그인을 모아둔 것. @babel/preset-env

 

 

 

 

폴리필(polyfill)

오래된 브라우저에서 지원하지 않는 APIs(missing APIs)를 지원해주는 역할

- fetch APIs, Promises, Map and Set, Array.from()

바벨과 마찬가지로 오래된 브라우저에서 사용 가능하기 위해 사용된다. 하지만 목적이 다르다.

유명한 폴리필: core.js, polyfill.io

 

 

 

웹팩

모듈 번들러

code와 depency를 이용하여 웹 브라우저에 의해 load 될 수 있는 single bundle file로 변환 (빌드)

'빌드'라는 과정을 통해서 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜준다.

 

 

 

javascript 엔진

javascript를 실행하는 인터프리터. 대체적으로 웹 브라우저에서 사용된다. 

- 크롬 웹 브라우저와 node.js에서 javascript 엔진으로 v8이 사용된다.

 

 

 

참고

https://velog.io/@uiseop/JS-%EB%B0%94%EB%B2%A8Babel%EA%B3%BC-%ED%8F%B4%EB%A6%AC%ED%95%84Polyfill