2. 트랜스파일(Transpile)의 이해와 활용

---

2.1. 컴파일(compile)과의 비교

• compile :
  • 한 언어로 작성된 소스 코드를 다른 언어로 변환
  • Java → bytecode
  • C → assembly
• transpile :
  • 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환
  • ES6 → ES5
  • C++ → C
  • typescript → javascript
• 둘은 별개의 개념이 아님. compile의 범주 안에 transpile이 있음

---

2.2. 폴리필(polyfill)과의 비교

2.2.1. 공통점 | 등장 배경

• 특정 기능을 사용하는 스크립트 코드를 작성했지만 코드가 실행되는 환경이 아직 해당 기능을 지원하지 않을 때 이를 해결하기 위해 등장
• ES6 출시 이후로 필요성 증가

2.2.2. 차이점

• polyfill :
  • 브라우저가 지원하지 않는 API 또는 기능을 구현
  • 브라우저에서 주어진 기능을 제공한다면 같은 변수 도는 메소드 이름으로 구현, 저장
  • 예시 ) IE11에서의 Promise 객체
• 없는 객체나 메소드는 polyfill할 수 있지만 문법은 polyfill할 수 없음 → transpile

---

2.3. 사용 방법

2.3.1 babel | 최소한으로 시작하기

npm init -y
npm i --save-dev @babel/core @babel/cli @babel/preset-env
npx babel test.js --preset=preset-env -o test.out.js
// npx babel [트랜스파일할 파일명] --preset=[프리셋 명] -o [트랜스파일될 결과 파일명]

• babel/core : 바벨을 사용하기 위한 필수 패키지
• babel/cli : 커맨드라인에서 바벨을 사용하게 해주는 CLI 제공
• babel/preset-env :
  • 구문 변환에 대한 별도의 설정없이 최신js를 구형 브라우저에 사용할 수 있게 해주는 프리셋
  • 지원할 브라우저 정보와 일부 옵션을 지정하면 자동으로 필요한 기능을 주입해줌
  • 자동으로 주입되는 필요한 기능들은 컴파일에 필요한 바벨변환 플러그인들과 core-js 폴리필들임
  • 번들파일의 크기에 민감하지 않다면 가장 간단한 방법

+) 프리셋 : plugin들을 묶음으로 제공함

+) npx : 모듈의 일종으로, npm을 통해 로컬에 설치했어야만 실행 시킬 수 있었던 모듈을 임시로 불러와 실행 시킨 후 다시 없애줌

2.3.2 babel | 프리셋과 플러그인 설정 - babel.config.js

/* 
	예시 코드
	/babel.config.js
*/
const presets = ['@babel/preset-react'];
const plugins = [
    '@babel/plugin-transform-template-literals',
    '@babel/plugin-transform-arrow-functions'
]
module.exports = {presets, plugins};

---

참고자료

ETC - transpile (트랜스파일) 과 compile (컴파일) 의 비교

JavaScript | Polyfilling & Transpiling - GeeksforGeeks

[Babel] 기본 사용법과 컴파일과정