[프론트엔드 전반] 트랜스파일러

트랜스파일러

---

• 트랜스파일러(Transpiler)는 소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환해주는 도구다.
• 트랜스파일러는 소스 코드를 분석하고 변환하는 과정을 거쳐 원본 코드와 동일한 동작을 하는 대상 언어 코드를 생성한다.
• 예를 들어, 최신 버전의 자바스크립트인 ES6(ES2015) 코드를 구형 버전인 ES5로 변환해주는 Babel은 자바스크립트 트랜스파일러의 대표적인 예다.
• 트랜스파일러는 언어 간의 문법 차이나 기능 지원 차이를 극복하여 크로스플랫폼 개발이나 브라우저 호환성을 향상시키는 데 사용된다.

바벨(Babel)

---

JavaScript 코드를 변환해주는 오픈 소스 JavaScript 트랜스 파일러다. 바벨은 주로 현대적인 JavaScript 코드를 더 오래된 JavaScript 버전으로 변환하거나, 다른 JavaScript 환경에서 동작하도록 코드를 수정하는 데 사용된다.

바벨의 주요 기능과 특징

• ES6+ 변환 : 바벨은 ECMAScript 6(ES6) 및 그 이후의 버전에서 도입된 JavaScript 기능들을 이전 버전으로 변환할 수 있다. 이를 통해 오래된 브라우저에서도 최신 기능을 사용한 코드를 실행할 수 있게 된다.
• 플러그인 시스템 : 바벨은 다양한 플러그인을 사용하여 코드 변환을 수행한다. 이러한 플러그인은 JavaScript 언어 변환 외에도 JSX, TypeScript, Flow 등 다양한 언어 확장을 지원한다.
• 커스터마이징 : 개발자는 바벨을 사용하여 코드 변환 규칙을 사용자 정의할 수 있다. 이를 통해 프로젝트의 특정 요구사항에 맞게 코드를 변환할 수 있다.
• 웹팩과 통합 : 바벨은 웹팩(Webpack)과 함께 사용하여 모듈 번들링 및 코드 변환을 통합할 수 있다. 이는 웹 애플리케이션의 번들링 및 최적화에 매우 유용하다.
• 문법 체크 : 바벨은 코드를 변환하는 동시에 코드 문법을 검사하여 오류를 찾아주는 기능도 제공한다.

바벨 설치

npm install --save-dev @babel/core @babel/cli @babel/preset-env

.babelrc 파일

{
  "presets": ["@babel/preset-env"]
}

ES6 코드

const name = "John";
const greeting = `Hello, ${name}!`;

console.log(greeting);

바벨을 사용하여 변환된 코드

"use strict";

var name = "John";
var greeting = "Hello, " + name + "!";

console.log(greeting);