TIL babel, AST

https://github.com/jamiebuilds/babel-handbook/blob/master/translations/ko/README.md

 

 

babel이란? 

---

 

 

모든 브라우저가 최신 문법인 ES6를 지원하지 않음

이러한 호환성 문제 때문에 있는 것이 babel

ES5 이상 버전으로 작성된 코드를 자바스크립트 하위 버전으로 변환하여 

호환될 수 있게 해주는 컴파일러

 

- Babel의 기능

 

Transform syntax
Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
Source code transformations (codemods)
And more! (check out these videos for inspiration)

 

1. 문법 변환

2. 대상 환경에서 core-js와 같은 서드파티 폴리필을 통해 빠져있는 것들을 채워줌 

3. 소스코드 변환 (codemods : 코드변환을 자동화시킬 수 있는 도구)

등등!

 

Babel은 Babylon을 사용해 코드를 파싱하고

AST를 탐색해 모든 변수 이름을 변환후 

코드를 생성함.

 

 

 

AST란?

---

 

 

1. 설명 

 

Abstract Syntax Tree

프로그래밍 언어의 문법에 따라 소스 코드 구조를 표시하는 계층적 프로그램 표현 (respresentation) 입니다


출처 : https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers

 

일반 텍스트로부터 트리와 같은 데이터 구조로 만들어 줌 

 

출처: 위키백과 추상 구문 트리

 

 

2. AST의 추출

  - 1. 렉시컬 분석

코드의 문자를 읽어서 토큰으로 만들어 합침

주석을 지우고 코드를 토큰으로 나눔

공백, operator, symbol, special symbol을 만나면 단어가 끝난 것으로 간주 

 

  - 2. 신택스 분석

토큰 목록을 트리 구조로 만듦. 에러가 있을 경우 에러표시.

불필요한 토큰은 생략

Abstract Syntax Tree 를 만듦.

 

 

 

 

참고 : 

AST explorer : 코드를 AST로 변환해주는 사이트 

AST explorer

 

 

 

읽어볼 만한 자료들 

 

자바스크립트 개발자를 위한 AST 이해하기

 

Codemod를 이용한 코드 변환

 

자바스크립트 개발자를 위한 AST(번역)

폴리필

Babel Handbook

https://github.com/jamiebuilds/babel-handbook/blob/master/translations/ko/README.md