[npm] 트랜스컴파일러 babel 셋팅

Babel은 ECMAScript 2015+/TypeScript/Ract의 JSX/Flow 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 도구다. 

 

 

1. npm을 이용해 바벨 패키지를 설치한다.

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

이 명령어를 보면 @babel/core와 @babel/cli, @babel/preset-env 패키지를 설치하라는 의미이다.

@babel/core  :  바벨의 핵심 기능

@babel/cli  :  터미널에서 babel을 사용할 수 있게 해주는 도구

@babel/preset-env  :  바벨의 프리셋 중 하나로, ES6 문법을 이전 버전과 호환되는 JavaScript 버전으로 변환

 

🎈 preset?

babel preset은  공유가능한 babel plugin들 또는 config option들의 집합

 

※ 바벨은 아래와 같은 공식 프리셋을 제공한다.

PRESET
@babel/preset-env	compiling ES2015+ syntax	프로젝트에서 ECMAScript 2015(ES6) + 코드를 사용하는 경우,  해당 프리셋을 추가하면 ES5 로 변환해준다.
@babel/preset-typescript	TypeScript	프로젝트에서 typescript 코드를 사용하는 경우,  해당 프리셋을 추가하면 typescript 주석을 제거해 준다.
@babel/preset-react	React	프로젝트에서 React를 사용하는 경우, 해당 프리셋을 추가해주면 JSX를
@babel/preset-flow	Flow	Flow는 JavaScript 코드의 정적 유형 검사기. 프로젝트에서 Flow를 사용하는 경우, 해당 프리셋을 추가

 

 

🎈 plugin?

babel이 코드를 어떻게  변환할지에대한 룰을 정의해 주는 요소

@babel/plugin-transform-arrow-functions  : ES6의 Arrow Function을 ES5 타입으로 변환 (@babel/preset-env에 포함)

@babel/plugin-transform-for-of : ES6의 for-of 를 ES5 타입으로 변경 (@babel/preset-env 에 포함)

 

※ babel-env preset에는 아래와 같은 플러그인들이 포함되있다

 

2. 프로젝트 root에 설정 파일을 생성하고 아래 내용을 삽입한다.

2.1. babel의 버전이 v7.8.0 이상일 경우 파일명 "babel.config.json"으로

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {  
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

위의 브라우저 목록은 sample일 뿐,  지원하는 브라우저에 맞게 조정을 해야한다.

 

2.2. babel의 버전이 v7.8.0 미만일 경우 파일명 "babel.config.js"으로  

const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { presets };

 

3. 터미널에서 아래 명령어를 실행하여 코드를 변환한다.

$ ./node_modules/.bin/babel [변환 타깃이 되는 폴더] --out-dir [변환된 파일을 저장할 폴더]

터미널에서 해당 프로젝트 루트 디렉토리에서 위와 같은 명령어를 실행하면 트랜스파일이 진행되고, 결과가 [변환된 파일을 저장할 폴더]에 저장된다. 변환은 2번 설정에서 targets에 변환된 코드를 실행할 브라우저 환경 정보를 잘 입력해야 한다. edge 10으로 설정하니 arrow function이 다음과 같이 변환된다.