Babel 을 사용해 오류 없는 javascript 코드를 만들자!

Babel 이란?

자바스크립트는 실행 환경에 따라 최신 문법을 사용할 수도 있고, 사용하지 못할 수도 있습니다.

이러한 실행 환경에 맞춰서 항상 최신 문법의 자바스크립트로 코딩이 가능하도록 도와주는 도구입니다.

---

Babel 을 사용하는 이유

예제 코드

let a = 1;
let b = 2;

const sum = (x, y) => x + y;
console.log(sum(a, b)) // 3

흔히 람다라고 불리는 화살표함수(=>)는 ES6 부터 사용할 수 있습니다. 일반적으로 IE 에서는 ES5 까지만 지원하기 때문에 해당 코드를 사용하면 오류가 발생합니다.

이를 해결하기 위해서는 ES6 코드로 작성한 부분을 실행환경에 맞게 변경할 수 있어야 합니다.

이를 도와주는 도구가 'Babel' 입니다.

---

Babel 설치

Babel 을 설치하려면 기본적으로 node가 설치되어 있어야 합니다.

위에서 작성한 before.js 가 있는 경로에서 아래 명령어를 실행합니다.

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

D(dev)로 설치하는 이유는 빌드할 때만 필요하고 서비스 실행 시에 필요한 것은 아니기 때문입니다.

babel을 사용해 바로 변환할 수 있지만, 아직 내가 원하는 실행환경으로 변환할 수는 없는 상황입니다.

---

Plugin & Preset 설정

Babel을 설치한다고 모든 실행환경에 적합한 코드로 변환해주는 것은 아닙니다.

Babel에게 어떤 실행환경에 맞게 변환해야 하는지 알려줘야 합니다. 그 역할을 하는 것이 babel-preset-env 입니다.

설정하고자 하는 브라우저를 선택할 수 있습니다.

preset 설치

$ npm i -D @babel/preset-env

presets 옵션을 사용해 코드 변환

이제 before.js 를 변환해 보겠습니다.

$ npx babel before.js --presets=@babel/env -o after.js

변환 후 코드는 after.js 라는 파일이 생성됩니다.

"use strict";

var a = 1;
var b = 2;

var sum = function sum(x, y) {
  return x + y;
};

console.log(sum(a, b)); // 3

ES6 이상에서만 사용할 수 있는 화살표 함수가 없어진 것을 확인할 수 있습니다.

babelrc 설정

근데 babel 을 사용 시 항상 presets 옵션을 주면 너무 번거로우니 이 옵션을 생략할 수 있는 방법이 있습니다.

최상위 디렉토리에 .babelrc 파일을 생성한 후 아래 코드를 작성합니다.

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

지금 부터는 옵션을 제외해도 자동으로 presets 옵션이 적용되는 것을 확인할 수 있습니다.

$ npx babel before.js -o after.js

디렉토리 단위 변환

이렇게 하나씩 할 수도 있고, 특정 폴더 내의 모든 파일을 변환할 수도 있습니다.

$ npx babel [변환 전 디렉토리명] -d [변환 후 디렉토리명]

이렇게 하면 변환 전 디렉토리명에 있는 파일들을 변환해서 변환 후 디렉토리명에 저장합니다.

물론 두 디렉토리명이 같다면 해당파일을 그대로 변환합니다.

아래는 실제 사용 예시입니다.

$ npx babel babel_before -d babel_after

---

참고자료

1. babel-preset-env는 무엇이고 왜 필요한가?

2. 바벨(Babel 7) 기본 사용법

---