Frontend - Babel

Babel

 

Babel은 트랜스파일러(transpiler)로, 최신 버전의 자바스크립트 코드를 구형 버전의 코드로 바꿔줍니다.

 

이 방식으로 최신 자바스크립트기능 혹은 코드를 구형 브라우저 혹은 구형 환경에서도 실행 가능하게 합니다.

 

 

Babel의 기능

 

• Syntax 변환
• 목표 환경에 없는 특징을 polyfill ( core-js와 같은 third-party polyfill )
• 소스 코드 변환 ( codemods )

 

Polyfill : 직역하면 충전솜. 이전 브라우저에는 없는 최신 기능, 지원하지 않는 코드를 수행 가능하게 하는 코드 혹은 플러그인. 

 

Babel의 주요 역할

 

1. 트랜스파일러 ( Transpiler )

 

바벨은 코드를 재작성해주는 트랜스파일러 프로그램입니다. 바벨을 실행시키면 작성된 코드가 이전 버전의 자바스크립트 표준을 지키는 코드로 변환됩니다. 웹팩(WebPack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될때마다 자동으로 트랜스파일러를 동작시킵니다.

 

 

2. 폴리필 (Polyfill )

 

새로운 버전에는 새로운 문법이나 기존에 없던 내장 함수가 추가되기도 합니다. 새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준으로 준수하는 코드로 변경해줍니다. 반면, 새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있습니다. 이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 이전 명세의 코드로 새롭게 구현한 함수를 폴리필 이라고 합니다.

 

 

트랜스파일러와 폴리필 차이

 

폴리필

새로운 함수가 명세에 추가되었을때 기존의 함수 작동 방식을 변경하거나 이전 명세의 코드로 새롭게 함수를 구현하는것

 

트랜스파일러

작성된 코드를 이전 명세에 따르는 코드로 변경해주는것

 

 

출처 :

https://ko.javascript.info/polyfills

폴리필

https://babeljs.io/docs/en/

Babel · The compiler for next generation JavaScript