Babel
바벨을 사용하는 게 익숙하지 않은 독자를 대상으로 작성한 글입니다.
0. Intro
보통 프로젝트를 시작하기 위해 초기 설정을 하며 바벨을 처음 만나게 됩니다. 필요하다고 하니깐 사용하기는 하는데, 초기 설정 이후 우리는 바벨을 잊곤 합니다. 어렴풋이 알고는 있지만 아직은 어색한 사이인 바벨, 조금 더 친해져보도록 하겠습니다.
Table of Contents
- 바벨이란
- 바벨을 사용하는 이유
- 바벨 실습
1. 바벨이란
바벨은 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 합니다. 공식 홈페이지에서는 이러한 바벨을 컴파일러라고 소개하지만, 엄밀히 말하면 컴파일러는 아닙니다. 컴파일러는 사람이 작성한 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 프로그램을 의미하기 때문입니다. 바벨은 컴파일러의 역할과는 다르게 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행합니다. 이와 같은 작업을 하는 프로그램을 트랜스 파일러라고 합니다. 그래서 바벨은 보통 트랜스 파일러라고 불립니다.
2. 바벨을 사용하는 이유
바벨을 사용하는 이유를 알기 위해서는 먼저 크로스 브라우징(Cross Browsing)에 대한 이해가 필요합니다. 크로스 브라우징이란 플랫폼이나 각 브라우저의 렌더링 엔진의 차이로 보이는 모습이 다른 경우가 있는데, 최적화 작업을 통해 기존에 의도 한 대로 보이도록 하는 작업을 말합니다. 개발을 진행하면서 간혹 최신 브라우저에서 동작하는 기능을 다른 브라우저나 이전 버전의 브라우저에서 구현해야 하는 경우, 기능 자체를 생략하거나 단순화해야 하는 상황이 발생합니다. 이런 이슈는 코드의 일관성을 해칠 수 있으며, 협업 과정에서 또 다른 문제를 야기할 수 있습니다. 바벨은 이런 문제점들을 보완하고 해결하기 위해 등장했습니다.
3. 바벨 실습
바벨은 무엇이고, 바벨을 사용하는 이유를 알았으니 간단하게 실습해보겠습니다.
프로젝트 생성
실습을 위해 터미널에서 프로젝트를 생성합니다.
$ mkdir babel-practice
$ cd babel-practice
$ yarn init -y프로젝트를 생성하고, 간단하게 ES2015 arrow function 문법을 사용하여 코드를 작성하겠습니다.
// test.js
[1, 2, 3].map(n => n + 1);이제 바벨을 사용하여 코드를 transpile 하겠습니다.
바벨 설치
프로젝트에서 @babel/core와 @babel/cli 패키지를 개발 의존성(devDependencies)으로 설치합니다. 개발 의존성으로 설치하는 이유는 바벨이 애플리케이션이 실행될 때 필요한 것이 아니라 빌드할 때만 필요하기 때문입니다. 각 패키지에 관해 설명하면 @babel/core는 바벨을 사용하는데 필요한 패키지이고, @babel/cli는 터미널에서 커맨드를 입력해서 바벨을 사용하기 위해 필요한 패키지입니다.
yarn add -D @babel/core @babel/cli이제 터미널에서 이전에 작성했던 코드에 바벨을 적용하겠습니다. npx babel <파일명/디렉토리명>
$ npx babel test.js
[1, 2, 3].map(n => {
n + 1;
});기존의 코드에서 변화가 없습니다. 바벨에게 코드를 어떻게 변환해야 하는지 규칙을 알려주지 않았기 때문입니다.
Plugin/Preset 설정
바벨에서 플러그인(plugin)이나 프리셋(preset)을 통해 문법 변환 규칙을 알려줄 수 있습니다. 플러그인은 규칙 하나하나를 세밀하게 적용할 때 사용하고, 프리셋은 이런 규칙들을 모아놓은 세트로, 주로 한 번에 적용할 때 사용합니다.
실습에서는 넓게 이용되는 프리셋인 env를 사용하겠습니다. env는 ES6 이상(ES2015+)의 문법으로 작성된 코드를 ES5 문법의 코드로 변환해주는 모든 규칙을 정의하고 있습니다.
이전에 진행했던 방식과 동일하게 설치하겠습니다.
yarn add -D @babel/preset-env그리고, 이번에는 바벨에게 코드 변환의 규칙으로 env를 알려주겠습니다.
$ npx babel test.js --presets=@babel/env
"use strict";
[1, 2, 3].map(function (n) {
n + 1;
});이전의 코드와 비교해서 변경된 것을 확인할 수 있습니다.
바벨 설정 파일
하지만 매번 바벨에게 변환될 규칙을 알려주는 것은 매우 비효율적입니다.
그래서 대부분의 경우 바벨 설정 파일인 .babelrc나 babel.config.js, babel.config.json을 이용합니다.
.babelrc는 주로 하위 디렉토리나 파일에서 특정 플러그인이나 변환(규칙)을 실행할 때 적절하고, babel.config.js는 여러 패키지 디렉토리를 가진 프로젝트에서 규칙을 설정할 때 유용합니다. 둘 중에 babel.config.js가 보다 보편적으로 사용됩니다.
또한, 공식 문서에 따르면 babel.config.js를 사용하면 구성하는 api가 노출됩니다. 이러한 방식은 캐싱과 관련해서 복잡성을 증가시키므로, 대부분은 정적인 구성인 babel.config.json을 사용하는 게 더 좋은 선택입니다.
프로젝트 최상위 디렉토리에 .babelrc 파일을 생성 후, 다음 설정을 추가합니다.
// .babelrc
{
"presets": ["@babel/env"]
}이렇게 하면, 터미널에서 바벨 옵션을 주지 않고 실행해도 규칙이 적용되는 것을 볼 수 있습니다.
$ npx babel test.js
"use strict";
[1, 2, 3].map(function (n) {
n + 1;
});마침
바벨에 대해서 알아보고, 직접 실습해보면서 바벨이 코드를 transpile 하는 과정을 알아봤습니다. 위의 실습과 같이 바벨 설정 파일을 생성하여 단독으로 사용하기도 하지만, 프로젝트를 진행하면 보통 Webpack과 같은 bundler(번들러)와 함께 사용됩니다. 이번 글을 통해 바벨과 조금 더 친해지는 시간이 되었기를 바랍니다.