바벨과 함께 트랜스파일 해보기

정신 차리세요! 이 바벨이 아닙니다!

자바스크립트의 진화

자바스크립트 스펙은 계속해서 추가되고 있는데, 새로운 기능을 사용하려 해도 구버전 브라우저나 런타임 환경(Node.js)에서는 이를 제대로 지원하지 못하는 경우가 종종 있습니다.

같은 문법이더라도 동작하는 브라우저가 있고 동작하지 않는 브라우저가 있습니다.

따라서 최신 문법을 사용하자니 구세대 브라우저에서는 코드가 동작하지 않고, 그렇다고 항상 과거의 문법으로 코드를 짤 수도 없는 노릇인데요, 이런 딜레마를 해결하기 위해서는 최신 문법을 구버전 환경에서도 실행할 수 있도록 이전 문법으로 치환하는 트랜스파일 이라는 작업을 수행해야 합니다.

트랜스파일 예시

ES6에 새로 도입된 분해 할당 이라는 문법이 있습니다.

// index.js

const student = { name: "chanmin", age: 25 };
const { name, age } = student;

그러나 정말 오래된 브라우저나 IE, 또는 Node.js 버전 5 이하에서는 위 코드를 실행할 수 없습니다.

따라서 어떤 환경에서도 이 코드를 실행할 수 있도록 ES5 문법으로 직접 트랜스파일을 진행해 보도록 하겠습니다.

먼저 let과 const 키워드 역시 ES6에서 처음 등장한 문법이므로 이를 var 키워드로 교체합니다.

var student = { name: "chanmin", age: 25 };
var { name, age } = student;

그리고 분해 할당 대신, 프로퍼티 이름으로 된 변수가 객체의 프로퍼티 값을 갖도록 정의하겠습니다.

var student = { name: "chanmin", age: 25 };
var name = student.name;
var age = student.age;

이제 자바스크립트 엔진이 탑재된 어떤 환경에서도 실행 가능한 코드가 생성됐습니다!
그런데 이러면 최신 문법을 사용한 코드를 짤 때마다 ES5에 대응하는 코드를 함께 작성해야 하는 걸까요?

 

물론 작성하긴 해야겠지만, 여러분이 작성할 필요는 없습니다.
오늘 소개할 바벨(babel)이 대신 짜줄 테니까요!

babel 설치하기

바벨은 위에서 수행했던 트랜스파일을 최적화 & 자동화해 수행할 수 있는 도구입니다.
먼저 바벨을 설치해 보겠습니다.

// yarn
yarn add -D @babel/core @babel/cli

// npm
npm i -D @babel/core @babel/cli

바벨 설치가 끝났다면, yarn(또는 npx) babel index.js 커맨드를 통해 코드를 트랜스파일해 보겠습니다.

하지만 달라진게 없는 모습인데요, 과연 뭐가 문제였을까요?

플러그인과 프리셋

원인은 바로 바벨에게 "어떻게 트랜스파일을 진행할지" 를 지정해주지 않았기 때문인데요, 바벨이 수행할 작업을 지시하기 위해 플러그인과 프리셋이라는 설정이 필요합니다.

플러그인

플러그인은 특정 문법 또는 함수 단위의 트랜스파일을 지시하는 모듈입니다.
한번 분해 할당 문법을 위한 @babel/plugin-transform-destructuring 모듈을 설치해 보겠습니다.

이처럼 각 기능별로 플러그인이 존재합니다.

// yarn
yarn add -D @babel/plugin-transform-destructuring

// npm
npm i -D @babel/plugin-transform-destructuring

이제 플러그인을 사용한다는 것을 바벨에 알려야 하는데요, 이를 위해 .babelrc 또는 .babel.config.js 이라는 바벨 설정 파일을 작성해야 합니다.

잠깐 다른 이야기 : .babelrc와 babel.config.js

두 설정 파일의 차이는 바벨 공식 문서에서 확인할 수 있는데요, 둘의 차이를 요약하자면 다음과 같습니다.

• babel.config.js : 루트 경로로부터 모든 파일에 동일한 설정을 적용할 때
• .babelrc : 특정 경로에만 적용할 속성이 있을 때

참고 : 스택오버플로우 링크

다만 둘 중 보다 대중적으로 사용하는 설정은 .babelrc 파일이므로, .babelrc를 통해 방금 설치한 플러그인을 적용해 보겠습니다.

.babelrc 작성하기

.babelrc는 .babelrc.json 의 별칭으로 json 문법을 사용해 작성합니다.
분해 할당 문법을 위한 플러그인을 적용하기 위해, plugins 라는 키에 빈 배열을 전달합니다.

{
  "plugins": []
}

그리고 설치한 플러그인의 패키지명을 그대로 배열 안에 작성합니다.

{
  "plugins": ["@babel/plugin-transform-destructuring"]
}

이제 다시 yarn(또는 npx) babel index.js 를 실행하면, 다음과 같이 분해 할당 문법의 트랜스파일이 완료됩니다.

프리셋

하지만 위 코드에는 ES6에서 추가된 const 키워드가 존재해 구형 브라우저를 완벽하게 지원할 수 없습니다.
이는 @babel/plugin-transform-block-scoping 라는 플러그인을 추가하면 해결할 수 있긴 한데, 이렇게 모든 플러그인을 일일히 찾아다니며 추가하는게 최선일까요?

 

이 문제를 해결하기 위해 여러 플러그인을 한꺼번에 모아 관리하는 것이 프리셋입니다.
프리셋은 공식적으로 지원하는 프리셋을 사용할 수도 있지만, 직접 만들어 관리할 수도 있다는 것이 큰 장점입니다.

Tip. 공식 프리셋의 종류는 4가지가 존재합니다.

• @babel/preset-env : 최신 문법을 ES5 버전으로 트랜스파일하는 프리셋
• @babel/preset-react : 리액트의 jsx 문법을 트랜스파일하는 프리셋
• @babel/preset-typescript : 타입스크립트 문법을 트랜스파일하는 프리셋
• @babel/preset-flow : flow(타입 체크 라이브러리)를 위한 프리셋

이제 프리셋을 적용해 분해 할당 문법을 트랜스파일해 보겠습니다.
먼저 구형 자바스크립트 코드로 변환하기 위해 @babel/preset-env 프리셋을 설치합니다.

// yarn
yarn add -D @babel/preset-env

// npm
npm i -D @babel/preset-env

그 다음 바벨에 해당 프리셋을 사용한다고 알리기 위해 .babelrc 파일에 presets 라는 키를 만들고, 빈 배열을 전달해 보겠습니다.

{
  "presets": []
}

마지막으로 배열 안에 적용할 프리셋을 작성한 다음, yarn(또는 npx) babel index.js 를 통해 트랜스파일을 수행해 보겠습니다.

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

이전 세대 문법으로 치환이 완벽히 끝난 모습입니다!

정리

• 바벨은 최신 문법을 이전 세대 브라우저나 런타임에서 실행할 수 있도록 트랜스파일을 수행하는 역할을 한다.
• 바벨은 플러그인과 프리셋이라는 설정을 통해 어떻게 트랜스파일을 수행할지 결정한다.
• 플러그인과 프리셋을 사용한다고 알리기 위해서 .babelrc 나 babel.config.js 파일을 활용한다.