바벨이란 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 초기의 바벨은 ES6 코드를 ES5코드로 변환해주는 컴파일러였다. 현재는 바벨을 이용해 JSX 문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법들을 사용할 수 있다.
- @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
@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;
};
@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 모듈을 직접 사용하는 방식은 자유도가 높다는 장점이 있습니다.