[Nodejs]babel 활용하기

오늘은 babel을 활용하는 예시를 만들어 보겠습니다.

 

babel은 자바스크립트 컴파일러로, ECMAScript 2015 이후 형태의 코드들을 현재 및 예전 브라우저 또는 환경에서 사용할 수 있게, 즉 이전 자바스크립트 버전에 호환되는 형태로 변환시키는데 사용할 수 있습니다.

 

 

1.프로젝트 생성 및 초기화

mkdir 생성할 폴더명
cd 방금 생성한 폴더명
npm init -y

 

=> 원하는 경로에 폴더를 생성하고 해당 폴더로 이동 후 프로젝트 생성 및 초기화 시켜줍니다.

 

 

2.babel 관련 모듈 설치

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

 

=> babel/core 는 코드변환, 플러그인 관리 등 babel 의 핵심 기능, babel/cli 는 CLI 창에서 babel을 사용할 수 있게 만드는 기능 및 파일 출력, babel/preset-env 는 여러 플러그인들을 활용해 babel 사용자들이 브라우저 및 환경에 맞춰 원하는 변환을 사전 설정하는 기능을 제공합니다.

 

+

만약 설정한 preset 환경에 적합하게  js파일 변환해 바로 사용만하고 새 파일로 출력할 필요까진 없을 경우  babel/cli 보단 babel/node를 사용하는게 좋을 수 있습니다.

 

 

3. babel.config.json 파일, 변환할 js 파일, 변환할 js 파일들을 모아둘 폴더, 변환된 js 파일들을 모아둘 폴더 생성

touch babel.config.json
mkdir 변환할 js 파일들을 모아둘 폴더명
touch 변환할 js 파일명
mkdir 변환된 js 파일들을 모아둘 폴더명

=> babel.config.json 파일은 프로젝트 관련 root 경로에 생성합니다.

 

저는 위 이미지와 같이 생성하였습니다.

 

 

 

4. babel.config.json 파일 내용 작성

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

=> Babel이 자바스크립트 코드를 변환할 때 사용할 프리셋 preset-env 로 지정합니다.

관련 자세한 설정은 아래의 링크를 참고해 주세요.

https://babeljs.io/docs/babel-preset-env

https://babeljs.io/docs/config-files

 

 

 

5. 변환할 js 파일 코드 작성

const introduce = (name) => {
    console.log(`hello! my name is ${name}!`);
};

const person = {
    name: 'John',
    age: 25
};

introduce(person.name);

 

 

 

6. js 파일 코드 변환

npx babel 변환할js파일명및경로 --out-file 변환된js파일명및경로

=> CLI 창에서 위의 명령어를 활용해 js파일을 변환 합니다.

 

 

 

결과

변환전 js 파일 코드

변환된 js 파일 코드

 

위 이미지와 같이 ECMAScript 2015 이후 생긴  => 화살표 함수 문법, const 가 예전 자바스크립트 버전에서도 사용가능한 형태로 변경된 것을 확인할 수 있습니다.