transpiler와 compiler의 차이

 

바벨을 공부하던 도중, 

바벨이 transpiling한다는 표현을 보게 되었다. 

 

transpiling?  compiling아닌가? 

 

다시한번 보는 바벨의 정의

 

바벨은 크로스 브라우징 이슈를 해결하기 위해 코드를 변환시켜주는 역할을 한다. 

세계에는 많은 브라우저와 버전이 있다. 

우리가 사용하는 최신 문법은 일부 브라우저 버전과 호환되지 않는데, 

이것을 크로스 브라우징 이슈라고 표현한다. 

 

바벨의 단계는 

1. 파싱(코드를 읽고 추상구문트리로 변환)

2. 변환(추상구문 트리를 변경)

3. 출력(변경된 결과물 출력)

으로 이루어 지는데, 

바벨 플러그인에서 어떤 코드를 어떻게 변환할지 규칙을 나타낸다. 

 

 

 

트랜스파일러와 컴파일러의 차이 

 

그런데 왜 트랜스파일러인가?

두 용어가 약간 모호하고 또 혼합되어 쓰는 경우가 있지만 

일부 페이지에서는 다음과 같이 정의해 놓고 있었다. 

 

컴파일러는 인간의 언어와 가까운 컴퓨터 언어에서 (하이레벨)에서 컴퓨터가 이해하기 쉬운언어 (로우레벨)로 변환해주는 작업을 의미한다. 

트랜스파일러는 인풋과 아웃풋이 비슷한 언어레벨일때 사용되는 용어라고 한다. 

 

 

ES6와 ES5의 차이점

트랜스파일러를 이해하려면 ES6와 ES5의 차이점을 살펴 보아야 한다. 

ES6중 중요한 변화는

module, 클래스선언, 렉시컬 블록 스코핑, 이터레이터와 제너레이터, 프로미스 프로그래밍, 디스트럭처링 패턴, 그리고 Proper tail Calls가 있다. 

이 사양들은 아직까지 많은 브라우저에서 지원되지 않는다. 

ES6를 사용한 애플리케이션을 실행하기 위해서는 지원되는 ES5로 변환되어야 한다. 

 

 

트랜스파일러는 컴파일러와 비슷한 프로그램으로,

ES6에서 ES5로 변환해주어 브라우저에서 실행될 수 있게 해준다. 

 

 

 

해석의 여지가 있겠지만, 

바벨이 ES6 등에서 ES5로 변환해주는 역할을 하고 있으므로, 

비슷한 언어레벨이라서 트랜스파일링한다고 말할 수도 있겠다. 

(그러나 페이지에서는 컴파일러라고 하는데....

역시 해석의 차이가 맞는 것 같다)

 

 

Difference between Transpiler and Compiler - TypeScript

Babel이란 무엇인가?

 

[JavaScript] - Babel은 트랜스파일러(transpiler)일까? 컴파일러(compiler)일까?

Compiling (and Transpiling) Explained