Babel의 개념 및 사용 방법

2024-09-28 in Front-end

Babel의 개념 및 사용 방법에 대해 설명하는 페이지입니다.

목차

• 개요
• Babel이란?
• Babel의 기능
• Step 1 - Babel 패키지 설치하기
• Step 2 - babel.config.js 설정하기
  • ES Module
  • CommonJS
• Step 3 - CLI로 Babel 실행해보기
• Step 4 - package.json 스크립트 설정하기
• Step 5 - 커스텀 함수 사용하기
  • Pragma 설정하기
  • @jsx myCreateElement
• 참고 자료
• Comments

개요

이번 글에서는 Babel의 개념 및 Babel을 사용하여 JSX 파일을 트랜스파일링하는 방법에 대해 설명하겠습니다.

Babel이란?

바벨(Babel)이란 ES6 이상의 자바스크립트 코드를 구 버전인 ES5 자바스크립트 코드로 변환해주는 자바스크립트 컴파일러입니다.

일반적으로 자바스크립트는 컴파일러가 아닌 인터프리터로 동작하지만, 최신 자바스크립트(ES6 이상) 문법을 지원하지 않는 환경이 존재하므로, 해당 환경에서도 코드를 실행할 수 있도록 최신 자바스크립트 코드를 구 버전 자바스크립트로 변환할 필요가 있습니다. Babel은 최신 자바스크립트 코드를 구 버전으로 변환해주므로 최신 자바스크립트 문법을 지원하지 않는 브라우저에서도 자바스크립트를 실행할 수 있게 도와줍니다.

Babel의 기능

Babel의 기능은 다음과 같습니다.

• ECMAScript 변환

  Babel은 최신 ECMAScript(ES6 이상) 문법을 ES5 이하의 자바스크립트 코드로 변환해 줍니다. 이를 통해 구형 브라우저나 오래된 자바스크립트 런타임에서도 최신 문법을 사용할 수 있게 해줍니다. 예를 들어, const, let, await/async, 화살표 함수가 대표적입니다.

• JSX 문법 변환

  Babel은 최신 ECMAScript를 변환해 줄 뿐만 아니라 JSX, TSX 문법을 자바스크립트 코드로 변환해 줍니다. JSX 코드는 비공식 문법이기 때문에 브라우저에서는 JSX 코드를 이해하지 못합니다. Babel은 JSX 코드가 브라우저에서 실행되기 전에 브라우저가 이해할 수 있는 자바스크립트 코드로 트랜스파일링 해줍니다.

• 플러그인 시스템

  Babel은 플러그인을 통해 다양한 기능을 확장할 수 있습니다. 예를 들어, ES6 모듈 시스템을 CommonJS로 변환하는 플러그인이나 특정 문법을 지원하지 않는 브라우저에 맞춰 코드를 변환하는 플러그인을 사용할 수 있습니다. 이 외에도 JSX 문법을 변환하는 @babel/preset-react나 타입스크립트를 지원하는 @babel/preset-typescript 같은 프리셋도 자주 사용됩니다.

• Polyfill

  폴리필(Polyfill)이란 이전 브라우저나 오래된 자바스크립트 런타임과 같이, 특정 환경에서 지원되지 않는 최신 기능이나 API를 구현해주는 코드나 라이브러리를 의미합니다. Babel은 Polyfill 기능을 지원해주며, 이를 통해 브라우저 지원 문제에 신경 쓰지 않고 ES6 이상의 최신 기능을 사용할 수 있습니다.

Step 1 - Babel 패키지 설치하기

Babel을 사용하기 위해 먼저 다음 명령어를 입력하여 Babel 관련 패키지를 설치합니다.

npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react

각 패키지에 대해 설명하자면 다음과 같습니다.

• @babel/core

  Babel을 사용하여 자바스크립트 코드 변환 작업을 처리하는 핵심 패키지입니다. Babel이 자바스크립트 코드를 분석하고, AST(Abstract Syntax Tree)로 변환한 후 이를 변환하는 과정의 중심적인 역할을 합니다.

• @babel/cli

  Babel을 터미널의 명령어로 사용할 수 있게 해주는 패키지입니다.

• @babel/plugin-transform-arrow-functions

  ES6의 화살표 함수를 일반 함수 표현식으로 변환해주는 플러그인입니다.

• @babel/plugin-transform-template-literals

  ES6의 템플릿 리터럴(Template Literals)을 구형 자바스크립트의 문자열 연결 방식으로 변환해주는 플러그인입니다.

• @babel/preset-react

  JSX를 자바스크립트로 변환해주는 프리셋입니다.

Step 2 - babel.config.js 설정하기

Babel 관련 패키지를 설치한 후에는 프로젝트 루트에 babel.config.js 파일을 생성한 후 Babel을 설정해야 합니다.

ES Module

ES Module을 사용하는 경우 다음과 같이 export default를 사용하면 됩니다.

export default {
  presets: [["@babel/preset-react"]],
  plugins: [
    "@babel/plugin-transform-template-literals",
    "@babel/plugin-transform-arrow-functions",
  ],
};

CommonJS

CommonJS를 사용하는 경우 다음과 같이 module.exports를 사용하면 됩니다.

module.exports = {
  presets: [["@babel/preset-react"]],
  plugins: [
    "@babel/plugin-transform-template-literals",
    "@babel/plugin-transform-arrow-functions",
  ],
};

Step 3 - CLI로 Babel 실행해보기

먼저 Babel을 사용하여 JSX 파일을 트랜스파일링 해보겠습니다. 다음과 같이 자바스크립트 파일을 생성합니다.

// test.js

const element = <div>Test Element</div>;
const text = `Element Type: ${element.type}`;
const add = (a, b) => a + b;

이후 프로젝트 루트에서 터미널을 열고 다음 명령어를 입력하여 JSX 파일을 변환합니다. babel 뒤에는 변환하려는 파일 또는 디렉토리를 작성하고, --out-dir 뒤에는 변환된 파일을 저장할 디렉토리를 지정하면 됩니다. 아래 명령어는 위의 test.js 파일을 변환하는 명령어입니다.

npx babel ./test.js --out-dir dist

해당 명령어를 통해 성공적으로 JSX 파일을 변환하였다면 다음과 같은 결과가 나타나게 됩니다.

// dist/test.js

const element = /*#__PURE__*/ React.createElement("div", null, "Test Element");
const text = "Element Type: ".concat(element.type);
const add = function (a, b) {
  return a + b;
};

위의 코드에서 JSX 코드가 React.createElement 함수로 변환되었음을 확인할 수 있습니다. 또한 설정한 플러그인에 의해 템플릿 리터럴이 일반 자바스크립트 문자열로 변환되었고, 화살표 함수가 일반 자바스크립트 함수로 변환되었음을 확인할 수 있습니다.

Step 4 - package.json 스크립트 설정하기

터미널에서 커맨드 라인으로 Babel을 실행시킬 수도 있지만, package.json 스크립트 설정을 통해 사용할 수도 있습니다. 다음과 같이 package.json에서 Babel과 관련된 스크립트 설정을 합니다.

{
  "scripts": {
    "babel": "babel ./test.js --out-dir dist"
  },
  "devDependencies": {
    "@babel/cli": "^7.25.6",
    "@babel/core": "^7.25.2",
    "@babel/plugin-transform-arrow-functions": "^7.24.7",
    "@babel/plugin-transform-template-literals": "^7.24.7",
    "@babel/preset-react": "^7.24.7"
  }
}

이후 터미널에서 npm run babel을 입력하면 Babel을 실행시킬 수 있습니다.

Step 5 - 커스텀 함수 사용하기

일반적으로 JSX 파일을 트랜스파일링하면 React.createElement 함수로 변환됩니다. React.createElement 함수 대신 커스텀 함수로 변환하려면 두 가지 방법이 있습니다. 전자는 모든 파일에 대해 설정하는 방법이고, 후자는 개별 파일마다 다르게 설정하는 방법입니다.

Pragma 설정하기

React.createElement 함수 대신 커스텀 함수로 변환하려면 다음과 같이 pragma 설정을 통해 변환하고자 하는 함수를 지정하면 됩니다.

module.exports = {
  presets: [["@babel/preset-react", { pragma: "myCreateElement" }]],
  plugins: [
    "@babel/plugin-transform-template-literals",
    "@babel/plugin-transform-arrow-functions",
  ],
};

추가적으로 변환하고자 하는 파일에 커스텀 함수를 임포트해야 합니다.

const myCreateElement = require("./myCreateElement.js");

const element = <div>Test Element</div>;
const text = `Element Type: ${element.type}`;
const add = (a, b) => a + b;

이후 Babel로 트랜스파일링하면 다음과 같은 결과가 나타나게 됩니다.

// dist/test.js
const myCreateElement = require("./myCreateElement.js");
const element = myCreateElement("div", null, "Test Element");
const text = "Element Type: ".concat(element.type);
const add = function (a, b) {
  return a + b;
};

위의 코드에서 React.createElement 함수 대신 myCreateElement 함수로 변환되었음을 확인할 수 있습니다.

@jsx myCreateElement

/** @jsx myCreateElement */ 주석은 Babel이나 TypeScript를 사용할 때 특정 JSX 변환 함수를 사용하여 JSX를 변환하라는 지시를 하는 방법입니다. 이를 통해 사용자가 원하는 커스텀 함수를 명시할 수 있습니다.

/** @jsx myCreateElement2 */
const myCreateElement2 = require("./myCreateElement2.js");

const element = <div>Test Element</div>;
const text = `Element Type: ${element.type}`;
const add = (a, b) => a + b;

이후 Babel로 트랜스파일링하면 다음과 같은 결과가 나타나게 됩니다.

/** @jsx myCreateElement2 */
const myCreateElement2 = require("./myCreateElement2.js");
const element = myCreateElement2("div", null, "Test Element");
const text = "Element Type: ".concat(element.type);
const add = function (a, b) {
  return a + b;
};

위의 코드에서 React.createElement 함수 대신 myCreateElement2 함수로 변환되었음을 확인할 수 있습니다.

참고 자료

• Babel · Babel

Comments

---