Babel - es5로 변환하는 기초 예제

1. package.json 생성

npm init -y
yarn init -y

 

 

2. babel 관련 패키지 설치

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

 

• @babel/cli : cli ( Command Line Interface ) 바벨을 커맨드 인터페이스에서 바벨을 실행할 수 있도록 해주는 패키지
• @babel/core : 바벨을 실행하기 위해 필수적으로 설치되어야 하는 패키지
• @babel/preset-env : 자바스크립트 파일에 작성된 es6, es7, es8, es9 등등의 문법을 es5 문법으로 변환시켜준다. 이로인해 es6 이상의 문법을 지원하지 않는 브라우저에서도 자바스크립트가 정상적으로 작동할 수 있게 된다. 

@babel/preset-env는 @babel/plugin-transform-arrow-functions, @babel/plugin-transform-template-literals 등의 패키지들이 포함되어져 있는 종합 패키지이다.

 

babel preset에도 여러 종류가 있다.

• @babel/preset-react : 리액트의 JSX문법을 적용시키기 위해 사용한다.
• @babel/preset-typescript : 타입스크립트의 타입검사를 적용시키기 위해 사용한다.

 

 

3. src폴더에 index.js파일 생성

const Test = () => {
  console.log('Arrow Function');
};

바벨을 통해 es5 문법으로 변환할 것이기 때문에 es6문법인 화살표 함수를 사용

 

 

4. 바벨을 통해 변환

npx babel index.js --presets=@babel/env

var Test = function Test() {
  console.log('Arrow Function');
}; // 변환 결과

 

 

5. babel.config.js파일을 통해 바벨설정 관련 내용 정의

 

5-1. babel.config.js파일 생성

module.exports = {
  presests: [
    '@babel/env'
  ]
}

 

5-2. package.json에 해당 내용 추가

"scripts": {
  "babel_build": "babel src -d dist"
}

npm run babel_build라는 명령어를 입력하면 src폴더안에 있는 자바스크립트 파일들을 dist폴더로 변환한다. 변활할 때는 babel.config.js 또는 .babelrc 설정파일의 내용에 따라 변환을 한다.

 

 

6. 바벨을 통해 변환

npm run babel_build

 

/dist/index.js에 변환된 내용이 추가된다.

"use strict"

var Test = function Test() {
  console.log('Arrow Function');
}