babel 사용하기 (on WSL)

babel 사용하기 (on WSL)

babel이란?

babel은 ECMAScript 2015+ code(즉 최신 ECMAScript)를 낮은 버전의 JavaScript를 가진 브라우저에서도 동작이 가능하도록 변환시켜주는 도구이다. 다음 예시를 보도록 하자.

• ECMAScript

const A = (req, res) => {
  res.render("test");
};

babel은 위의 산뜻한 코드를 다음의 코드로 변환시켜준다.

• browser-compatible JavaScript

var A = function A(req, res) {
    res.render("test");
}

처음에는 솔직히 굳이 왜 쓰는지 이해가 안갔는데, 쓰다보니까 확실히 편하고 좋음!

install and setting

$ npm install @babel/node
$ npm install @babel/preset-env
$ npm install @babel/core

npm을 이용하여 간단하게 설치가 가능하다.

.babelrc

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

위의 .babelrc는 공식 홈페이지 https://babeljs.io/docs/en/babel-preset-env 에 나와있는대로 설정하면 된다.

package.json

...
  "scripts": {
    "start": "./node_modules/.bin/babel-node index.js"
  }

wsl에서는 babel-node가 왜인지 환경변수로 등록이 안되더라. 그래서 해당 경로에서 직접 실행해줘야 하는데, 위와 같이 등록하면 된다.