[Node] Babel Preset, Babelrc

 리액트를 공부하는 도중에 설치된 Babel 은 리액트 프로젝트를 이용할 때 자연스럽게 라이브러리가 추가되었습니다. 이 라이브러리가 무엇인지 부터 파악하는 것이 급했었던 저는 Babel은 es6 버전을 사용하는 리액트의 경우 브라우저 별로 지원하지 않는 함수들이 존재하기 때문 에 Babel을 사용한다고 파악하였습니다.

 

그러면 Babel을 적용하는 방법 이 궁금했었습니다. 그래서 간단하게 Babel을 파악하고 리액트에서 사용했던 Babel-preset-env와 babelrc에 대해 간략하게 소개하도록 하겠습니다.

 

 본 문서는 웹팩을 이용한 Babel 사용법을 나타내고 있습니다.

 

 

# Contents

---

• 바벨 적용
• Babel-preset-env 및 babelrc

 

 

# 바벨 적용

---

 바벨을 웹팩으로 적용시키는 방법은 아주 쉽습니다.

 먼저 아래 명령어를 입력하여 의존성을 설치하도록 합시다.

 

npm init -y
npm install --save-dev webpack webpack-cli babel-loader

 

 설치가 완료되었으면 웹팩의 설정 파일을 구성해야 합니다.

 webpack.config.js 파일을 새로 만드셔서 아래 코드를 삽입해주세요.

 

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/dist",
        filename: "index_bundle.js",
    },
    module: {
        rules: [{ test: /\.js$/, use: "babel-loader" }],
    },
};

 

 테스트할 코드는 아래와 같습니다. 

 src/index.js 파일을 새로 만드셔서 아래 코드를 삽입해주세요.

 

const hello = () => console.log("hello world");
hello();

 

 그리고 아래 명령어를 입력해주세요.

 

npx webpack

 

 결과 값은 아래와 같습니다.

 

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
const hello = () => console.log("hello world");

hello();
/******/ })()
;

 

 여기서 보시면 아시겠지만 문제점이 발생하게 됩니다. 분명 babel 을 적용하였는데 es6 문법이 그대로 나오게 되는 현상이 발생합니다. 사실 Babel을 로더하는 것만으로는 아무 처리도 안한다는 사실입니다. 따라서 플러그인을 사용하고 그 플러그인을 묶는 babelrc를 사용하는 이유이기도 합니다.

 

 바벨을 불러오는 것은 loader 이지만 기능을 동작하는 것은 loader가 아니라 babel-plugin인 것입니다.

 

 

# babel-preset-env 및 babelrc

---

 바벨을 동작하려면 어떻게 해야하는 것일까요? 사실상 플러그인을 통해 동작 하는 것입니다. 바벨의 플러그인은 각각의 npm 플러그인을 사용하여 다운받기 때문에 설치해야 하는 과정 이 필요합니다. 간단한 테스트를 위해 화살표 함수를 es5 형태로 바꾸어주는 @babel/plugin-transform-arrow-functions 을 설치해보도록 하겠습니다.

 

1. 설치 및 적용

 아래 명령어를 입력해주세요.

 

npm install --save-dev @babel/plugin-transform-arrow-functions

 

 그리고 babel한테 dependency를 쓴다고 말해야 합니다. babelrc 파일을 프로젝트에 추가합니다. babel 설정파일이며, es6에서 es5로 컴파일 할 때 .babelrc이 babel에게 @babel/plugin-transform-arrow-functions를 사용하여 es6에서 es5로 컴파일하라고 명령합니다. 참고로 @babel/plugin-transform-arrow-functions는 오직 arrow function을 컴파일할 때만 쓰입니다.

 

 다음 코드를 babelrc에 적용합니다.

 

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

 

그리고 아래 명령어를 입력해주세요

 

npx webpack

 

 결과 값은 아래와 같습니다.

 

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
const hello = function () {
  return console.log("hello world");
};

hello();
/******/ })()
;

 

화살표 함수는 정상적으로 변경되었지만 const 는 변화하지 않는 것을 확인할 수 있습니다.

 

es6 기능을 추가하여 es5 코드로 변환한다고 가정한다면, 플러그인의 라이브러리 설치를 필수로 해야하는 상황이 오게 되고, 그로 인해 복잡성은 더욱 더 추가될 것입니다. 이러한 에러 사항을 해결할 수 있는 것이 Babel Preset입니다.

 

 babel foundation에서 플러그인들의 집합 을 Preset 이라 칭하고, 이러한 Preset을 배포하고 있습니다.

 현재 다양한 babel preset들이 있는데 babel foundadtion에서 제공하는 공식 Preset과 Airbnb같은 곳에서 제공하는 비공식 Preset이 있습니다.

 

 공식적인 Preset의 목록에는 : 

 

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

 

 등이 있으며, 지금은 첫번째 Preset을 통해 화살표 함수를 es5 형태로 변경해보도록 하겠습니다.

 

 

2. Preset 적용

 의존하는 라이브러리를 설치해줘야합니다.

 다음 명령어를 통해 의존성을 설치해주세요.

 

npm install --save-dev @babel/preset-env

 

 다음 코드를 babelrc에 적용합니다.

 

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

 

 그리고 아래 명령어를 입력해주세요

 

npx webpack

 

 결과 값은 아래와 같습니다.

 

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
var hello = function hello() {
  return console.log("hello world");
};

hello();
/******/ })()
;

 

화살표 함수와 const 모두 정상적으로 변경되었음을 확인할 수 있었습니다.