Babel

초반에 JS를 공부할 때 잠깐 스쳐 지나갔던 바벨이다
프로젝트를 진행할 때는 몰라도 상관없었지만 취업시장에서 js를 메인 스택으로 사용한다면 면접준비를 위해서라도 필요하겠다 생각이 들었다. 그래서 구글링을 해봤다.

✍ Babel의 정의

공식 사이트에 따르면 이렇게 나와 있다.

Babel is a Javascript compiler.

작성한 코드를 자바스크립트로 컴파일 해주는 역할이라고 한다.

이 역할이 왜 필요하냐면 현재 개발시장에도 최신 브라우저들이 지원조차 하지 못하는 문법이나 기술들이 많이 나오고 있는데, 실제로 유저들은 최신버전보단 구 버전을 사용하는 경우가 많다.
국내 웹 브라우저도 크롬이 몇년 째 압도적인 1위를 유지하고 있고, 안드로이드의 점유율도 마찬가지다.

이렇게 최신 버전을 사용했을 떄 예전 버전에도 호환되게 하기 위해Babel을 이용해서 컴파일하면 된다.

✍ polyfill

개발자가 특정 기능이 지원 되지 않는 브라우저를 사용할 수 있는 코드 조각이나 플러그인을 의미한다.

✍ babel-polyfill

babel은 이러한 polyfill을 손쉽게 지원하기 위해 babel-polyfill 기능을 지원한다.

babel은 javascript로 컴파일하고, polyfill은 프로그램이 시작될 때 지원하지 않는 기능을 추가하는 것이다.

즉 polyfill은 런타임에 실행되고, babel은 컴파일 시에 실행된다.

실행 예시

최근 브라우저 2가지의 버전만 지원하면서도 10버전 이하의 IE는 제외하는 코드이다.

   {
      "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 versions", "not ie <= 10"]
          }
        }]
      ]
    }