BABEL
in blog on javascript, Nodejs, React, Babel
BABEL
BABEL
- 바벨은 자바스크립트 컴파일러
BABEL Homepage - 모든 브라우저가 최신 문법, 기술(ES6) 을 지원하지 않기 때문에
- 구 기능(ES5)으로 변환하는 작업이 필요
- 참고
BABEL이 하는 일
| 기능 | 설명 |
|---|---|
| Transform syntax (구문 변환) | 트랜스파일링은 최신의 자바스크립트 문법을 오래된 브라우저가 이해할 수 있도록 오래된 문법으로 변환 |
| babel-polyfill | 폴리필은 오래된 브라우저에 네이티브로 지원하지 않는 사용자가 사용하는 메서드, 속성, API가 존재하지 않을 때 추가해 준다.바벨은 최신 문법을 오래된 문법으로 변환해 주는 트랜스파일러 역할만 할 뿐 최신 함수를 사용할 수 있는 건 아니다. 폴리필은 프로그램이 처음 시작할 때, 지원하지 않는 기능들을 지원해 준다. Babel은 컴파일 때 실행되고 polyfill은 런타임에 실행 |
Babel은 어떻게 동작할까?
| 동작 | 설명 |
|---|---|
| Parsing (파싱) | 바벨은 소스 코드를 분석하여 AST(Abstract Syntax Tree)로 변환. AST는 소스 코드의 추상 구문 구조의 트리. 컴파일러에서 자료 구조로 사용되며 컴파일러의 구문 분석(parsing) 단계의 트리로 표현된 결과물이다. @babel/parser의 parse 함수를 사용하여 AWT로 파싱 할 수 있다. |
| Transformation (변환) | 이전 단계에서 생성된 AST를 브라우저가 지원하는 오래된 문법으로 AST를 변경. 이 단계에서 plugin 또는 preset(plugin 배열)에 의해 관리되는데 이때 사용되는 plugin들은 @babel/traverse을 사용하여 AST를 순회. 즉, @babel/traverse을 사용하여 AST를 순회하며 각 AST 노드들은 브라우저가 지원하는 코드를 나타내는 새로운 노드들로 대체되고 새로운 AST로 변경 |
| Code Generation (코드 생성) | 바벨은 새로운 AST를 바탕으로 @babel/generator를 통하여 새로운 코드를 생성. |
