Node.js Project 설정 가이드 (3) - babeljs 적용

babejs 소개

Babel은 JavaScript 컴파일러 및 트랜스파일러로, 모든 브라우저나 환경에서 지원되지 않을 수 있는 최신 JavaScript 버전과 기능을 사용할 수 있게 해 준다. 오래된 브라우저나 환경에서도 코드가 실행될 수 있도록, 현대의 JavaScript 코드를 광범위하게 지원되는 ES5 코드로 컴파일할 수 있다.

Babel의 주요 특징은 다음과 같다.

1. 구문 변환: Babel은 최신 JavaScript 구문, ECMAScript 2015(ES6) 이상을 사용할 수 있게 하며, 이를 ES5 코드로 변환할 수 있다.
2. Polyfill 기능: Babel은 'polyfill'을 이용해 목표 환경에서 누락된 기능을 모방할 수 있다.
3. 소스 코드 변환: Babel은 소스 코드를 변환하는 도구들을 이용할 수 있게 하는 플러그인 시스템을 가지고 있다. (플러그인마다 하는 변환하는 일은 다르다.)
4. JSX 및 TypeScript 지원: Babel은 JSX(React에서 사용) 및 TypeScript와 같은 비표준 언어 확장을 컴파일할 수도 있다.

여기서 우리가 집중하는 기능은 오히려 4번이다. 우리는 es2020을 타깃으로 하고 있기 때문에 es5나 6수준의 오래된 javascript 문법으로 변환하는 것은 그다지 필요가 없다. 대신 typescript를 javascript로 컴파일하는 기능을 사용해보도록 하자.

설치

아래와 같이 babel과 관련된 몇가지 패키지를 설치하자.

npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-typescript

그리고 프로젝트의 root폴더에 .babelrc (확장자 없음) 파일을 하나 만들자.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-typescript"
  ]
}

package.json의 scripts 부분을 좀 수정하자. test가 있을 텐데 그 밑에 붙이면 된다.

"build": "babel src --out-dir dist --extensions '.ts,.js'",
"start" : "npm run build && node dist/index.js"

테스트

이제 ts-node를 쓰는 것이 아니라 npm start 로 실행한다. 그러면 우리가 package.json에 정의한대로 build가 먼저 일어나고 dist/index.js 가 node에 의해 실행된다.

➜  my-nodejs-proj npm start

> my-nodejs-proj@1.0.0 start
> npm run build && node dist/index.js


> my-nodejs-proj@1.0.0 build
> babel src --out-dir dist --extensions '.ts,.js'

Successfully compiled 2 files with Babel (162ms).
hello world
My name is dave
➜  my-nodejs-proj