바벨

바벨이란 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 초기의 바벨은 ES6 코드를 ES5코드로 변환해주는 컴파일러였다. 현재는 바벨을 이용해 JSX 문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법들을 사용할 수 있다.

바벨 실행 및 설정

바벨을 실행시키는 방식 4가지

• @babel/cli로 실행하기
• 웹팩에서 babel-loader로 실행하기
• @babel/core로 직접 실행하기
• @babel/register로 실행하기

실습을 해보겠습니다. 우선 폴더를 생성하고 package.json 파일을 생성합니다.

mkdir babel-test 
cd babel-test
npm init -y

필요 패키지 설치합니다.

npm install @babel/core @babel/cli  @babel/plugin-transform-arrow-functions 
@babel/plugin-transform-template-literals @babel/preset-react

바벨을 실행하기 위해서는 @babel/core 패키지를 필수로 설치해야한다.

./src/code.js 파일을 작성합니다.

const element = <div>babel test</div>; - 1
const test = `element type is ${element.type}`; - 2
const add = (a, b) => a + b; - 3

1. 리액트 프리셋을 이용해서 JSX 문법을 변환할 예정
2. 템플릿 리터럴 플러그인을 이용해서 템플릿 리터럴 코드를 변활할 예정
3. 화살표 함수 플러그인을 이용해서 화살표 함수를 변환할 예정

@babel/cli로 실행하기

아래 명령어로 실행시킵니다.

npx babel src/code.js --presets=@babel/preset-react 
--plugins=@babel/plugin-transform-template-literals,
@babel/plugin-transform-arrow-functions 

바벨이 실행되면 콘솔에 다음과 같이 출력됩니다/

const element = React.createElement("div", null, "babel test"); - 1
const test = "element type is ".concat(element.type); - 2
const add = function (a, b) { - 3
  return a + b;
};

1. JSX 문법은 createElement 함수 호출로 변환된다.
2. 템플릿 리터럴은 문자열의 concat 메서드 호출로 변환된다.
3. 화살표 함수는 일반 함수로 변환된다.

@babel/cli로 거의 모든 설정값을 표현할 수 있지만, 설정할 내용이 많거나 실행 환경에 따라 설정값이 다른 경우에는 설정 파일을 따로 만드는게 좋다.

프로젝트 루트에 babel.config.js(바벨 7) 파일을 작성. (바벨 6의 경우 .babelrc 파일로 작성)

const presets = ['@babel/preset-react'];
const plugins = [
  '@babel/plugin-transform-template-literals',
  '@babel/plugin-transform-arrow-functions',
];

module.exports = { presets, plugins };

npx babel src/code.js
npx babel src/code.js --out-file dist.js // 파일로 저장
npx babel src/ --out-dir dist // 폴더 단위로 처리

웹팩의 babel-loader로 실행하기

웹팩을 이용하기위해 패키지를 추가로 설치하고 프로젝트 루트에 webpack.config 파일을 작성한다.
npm install webpack webpack-cli babel-loader

const path = require('path');

module.exports = {
  entry: './src/code.js', // 번들링할 파일 지정
  output: {
    path: path.resolve(__dirname, 'dist'), // 경로
    filename: 'code.bundle.js', // 저장할 파일명
  },
  module: {
    rules: [{ test: /\.js$/, use: 'babel-loader' }],
  },
  optimization: { minimizer: [] },
};

자바스크립트 파일을 babel-loader가 처리하도록 설정한다. babel-loader는 바벨의 설정 파일을 이용하므로 이전에 만들어 놓은 babel.config.js 파일의 내용이 설정값으로 사용된다.

npx webpack 

명령어를 실행하면 dist/code.bundle.js 파일이 생성된다. 파일의 뒷부분에서 바벨이 생성한 코드를 확인 할 수 있다.

@babel/core 직접 이용하기
이번에는 @babel/core를 사용하는 코드를 작성해서 바벨을 실행해보자.
프로젝트 루트에 runBabel.js 파일을 작성했다.

const babel = require('@babel/core'); // @babel/core 모듈 가져오기
const fs = require('fs');

const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8'); // 컴파일할 파일의 내용 가져오기
const presets = ['@babel/preset-react']; // 바벨 프리셋 설정
const plugins = [ // 바벨 플러그인 설정
  '@babel/plugin-transform-template-literals',
  '@babel/plugin-transform-arrow-functions',
];

const { code } = babel.transformSync(source, { // transformSync 함수로 바벨 실행
  filename,
  presets,
  plugins,
  configFile: false, // babel.config.js 파일을 사용하지 않도록 설정
});
console.log(code);

node runBabel.js 명령어를 실행하면 결과가 콘솔에 출력된다.

@babel/core 모듈을 직접 사용하는 방식은 자유도가 높다는 장점이 있습니다.