Polyfill, Babel

자바스크립트 사용시 문제

1. 자바스크립트는 다양한 엔진과 다양한 버전으로 인해서 모든 브라우저에서 호환하지 못하는 구조이다. 그렇기 때문에 최신 자바스크립트를 사용하기 위해서 제공되는 방법중 하나가 최신 자바스크립트 코드를 브라우저가 알수 있는 형태로 변환하는 방법을 위해서 polifill, babel, webpack등이 제공된다.

자바스크립트 Build 및 Code 변환

1. Webpack을 이용하여 빌드를 하여 자바스크립트를 배포할수 있게 만드는데,

• 이때, Babel은 최신 자바스크립트 코드를 컴파일 타임에 호환되는 자바스크립트 코드로 변환한다.

2. Poilfill은 런타임에 Browser에서 지원되지 않는 함수를 체크

Polifill, Babel의 역할

공통적으로 polyfill과 babel을 이용하면, 모던한 자바스크립트 코드를 오래된브라우저에서도 사용할 수 있게 변경해주는 점에서 비슷하게 생각할 수 있다.
하지만,
1. Babel은 ES6+코드를 ES5 형태로 변환해준다.
2. Polifill은 ES5에 지원되지 않는 코드를 변환해준다.

만약에 ES6에 있는 메서드나 생성자가 ES5는 없기 때문에 코드 변환을 할수가 없기에, Polyfill은 ES5가 이러한 코드를 변환하는 작업을 한다.

• 아래 Bable의 tranpile과정에서 polyfill이 필요한 부분의 동작을 내부 helper함수로 치환을 참고!

Babel

• Babel은 오래된 브라우저에서 모던(modern) 코드를 쓸 수 있게 해준다.
• ECMAScript 2015+코드를 이전 버전과 호환되는 Javascript버전으로 변환해주는 용도이고,
  • ES6+코드를 ES5로 변환하는 도구
• 바벨의 transpiler는 표준을 준수하는 코드로 바꿔주는 컴파일러
  1. 트랜스파일러
     • 바벨은 코드를 재작성해주는 트랜스파일러 프로그램
     • 개발한 코드를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경됨
     • 웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작
     • 예를 들면, arrow function이나 es6에서 지원하는 문법들을 변환해줌

// 변환 전 
const helloBabel = () => {
  return 'world';
}

// 변환 후 
var helloBabel = function helloBabel() {
  return 'world';
}

Polyfill

• Polyfill은 오래된 브라우저에서 모던(modern) 코드를 쓸 수 있게 해준다.
• Bable의 tranpile과정에서 polyfill이 필요한 부분의 동작을 내부 helper함수로 치환
• 예를 들면, Promise, Object.assign등은 ES5로 대체할 Syntax가 없다 (babel이 못한다)
• 종류
  • core js – 다양한 폴리필을 제공
  • polyfill.io – 브라우저에 따라 폴리필 스크립트를 제공
    • User-Agent기반으로 사용

// 변환 전
new Promise(resolve => resolve(1))

// 변환 후
var _promise = require("babel-runtime/core-js/promise");

var _promise2 = _interopRequireDefault(_promise);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

new _promise2.default(function (resolve) {
  return resolve(1);
});

Webpack

• 자바스크립트 빌드 시스템
• 빌드할때 하나의 번들로 SPA를 만들어준다.
• 개발용 Develop server 제공