Section 23: Browser Support - Ensure Your Scripts Work In All Browsers

The goals

💪🏻What is "Browser Support" About?

✌🏻Determining Required Support

👍🏻Finding Out Which Feature Works Where

👊🏻Polyfills

🤟🏻Transpilation

Babel

 

- ES6/7 코드를 ES5 코드로 Transpiling 해주는 Transpiler

- ES5 이전까지는 표준이 없었고, jquery 가 브라우저 호환성을 해결해줄 수 있기 때문에 필요 없었음

- Babel 은 스크립트 자체가 수정되어야 하는 상황으로 새로운 컴파일이 필요할 때 사용함 

- 자바스크립트 스펙으로 아직 확정되지 않은 Proposal 스펙이 5개의 Stage 로 구분되어 존재하는데, Babel 은 각각의 Stage 에 대해 Preset 을 제공함

 

아래의 Arrow Function (=>) 은 ES6 에서 추가된 함수 표현식으로, 화살표 표현식 (=>) 은 Javascript 의 Syntax 가 아니기 때문에 Javscript 가 읽을 수 있는 스크립트로 재 작성 되어 새로 컴파일 되어야 한다.

 

Babel 전

function addAdd(){
   return Array.from(arguments).map(a => a + 2);
}

Babel 후

function addAdd () {
   return Array.from(argument).map(function(a) {
   return a + 2;
 })
}

 

Polyfill

 

- 새로 추가된 전역 객체들(Promise, Map, Set)을 사용가능한 객체로 바꾸어주는 개념 

- 브라우저 파편화를 해결하기 위해 지원하지 않는 공백을 매꾸는 스크립트나 기타 코드를 끼워넣어줌

 

Bable 과 Polyfill 은 구분되어야 하는 개념인데, Babel 이 Javascript 의 Syntax 가 아닌 것들을 Javascript 에서 사용할 수 있게 만들어 준다면, Polyfill 은 Javascript 의 Syntax 로 읽히지만 정의되어 있지 않은 객체들을 정의해주는 개념을 말한다.

 

예를들어 Promise 객체는 기존에 존재하지 않는 ES6 에서 추가된 객체로, ES6 이전에서 new Promise() 를 하는 경우 Javascript 의 Syntax 이지만 정의되지 않는 function 이라는 의미에서 'Promise is not a function' 의 결과를 보여준다. Polyfill 개념을 이용해 Promise 를 사용할 수 있도록 정의해주는 것을 Babel-Polyfill 이 해줄 수 있다.

 

 

Babel-Polyfill

 

내부적으로 페북에서 만든 Generator Function Polyfill 인 regenerator-runtime 과 ES6/7 Polyfill 인 core.js를 주요 dependency 로 가지고 있으며, 안정적인 Polyfill 들을 사용하기 편리하게 랩핑해 놓은 모듈로 실제 사용하지 않는 Polyfill 도 몽땅 추가되므로 번들링 되는 파일의 크기가 커지게 되는 단점이 존재한다. 한 페이지에서 딱 하나의  babel-polypill 호출만 허용된다.

 

 

Babel-loader

 

 

 

 

Sources

https://github.com/babel/babel-loader

GitHub - babel/babel-loader: 📦 Babel loader for webpack