Babel과 Webpack의 내부 동작 이해하기 - 1 Babel 실행

[실전 리액트 프로그래밍] babel을 실행해보자!

 

babel이란?

리액트의 JSX 문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법 등을 사용할 수 있게 해 주는 자바스크립트 코드의 컴파일러.

 

babel을 실행하는 여러 가지 방법

• @babel/cli로 실행하기
• 웹팩에서 babel-loader로 실행하기
• @babel/core를 직접 실행하기
• @babel/register로 실행하기 <- Node.js에서 require코드가 실행될 때 동적으로 바벨이 실행되게 할 수 있다.

 

babel 설정하기

> 프로젝트를 생성할 폴더에 npm으로 생성한다.

npm init -y

/package.json 파일이 생성된다.

 

 

> 다음으로 필요한 패키지를 설치

바벨을 실행하기 위해서 필수적인 @babel/core와, 두 개의 플러그인, 프리셋 하나를 설치한다.

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

이것저것 와장창 적은 것 치고는 굉장히 빠르게 설치된다.

 

 

> 컴파일할 코드 작성

/src/code.js

const element = <div>babel test</div>;  // preset-react
const text = `element type is ${element.type}`;  // template-literals
const add = (a, b) => a + b;  // arrow-functions

 

 

> @babel/cli로 실행하기

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

 

설정할 내용이 많거나 실행 환경에 따라 설정값이 다른 경우에는 설정 파일을 따로 만든다.

babel 7 이상 '/babel.config.js'

babel 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로 실행하기

npm install webpack webpack-cli babel-loader

/webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/code.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'code.bundle.js',
  },
  modules: {
    rules: [{ test: /\.js$/, use: 'babel-loader'}],
  },
  optimization: { minimizer: [] },
}

entry -> 웹팩으로 번들링할 파일을 지정한다.

output -> 번들링된 결과를 파일로 저장한다.

module -> .js 파일을 babel-loader가 처리하도록 설정한다. (이 때 babel.config.js 파일의 내용이 설정값으로 사용된다.)

optimization: minimizer -> 압축 기능을 잠시 껐다.

 

npx webpack

실행 결과가 지정된 경로에 파일로 저장된다.

 

 

> @babel/core를 직접 이용하기

/runBabel.js

const babel = require('@babel/core');
const fs = require('fs');

const filename = './src/code.js';

// 컴파일할 파일을 가져옴
const source = fs.readFileSync(filename, 'utf-8');

// 바벨 플러그인과 프리셋을 설정
const presets = ['@babel/preset-react'];
const plugins = [
  '@babel/plugin-transform-template-literals',
  '@babel/plugin-transform-arrow-functions',
];

// 바벨을 실행
const {code} = babel.transformSync(source, {
  filename,
  presets,
  plugins,
  configFile: false,  // babel.config.js 사용하지않게
});

console.log(code);

 

만약 같은 프리셋을 사용하는데 두 가지 설정을 적용해야 한다면,

@babel/core를 사용하여 좀 더 효율적으로 실행할 수 있다.

• AST(abstract syntax tree)를 생성하여 재사용한다.

const babel = require('@babel/core');
const fs = require('fs');

const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf-8');
const presets = ['@babel/preset-react'];

const { ast } = babel.transformSync(source, {
  filename, 
  ast: true,
  code: false,
  presets, 
  configFile: false,
});

const { code: code1 } = babel.transformFromAstSync(ast, source, {
  filename,
  plugins: ['@babel/plugin-transform-template-literals'],
  configFile: false,
});

const { code: code2 } = babel.transformFromAstSync(ast, source, {
  filename,
  plugins: ['@babel/plugin-transform-arrow-functions'],
  configFile: false,
});

console.log(code1);
console.log(code2);

 

node runBabel.js

명령어로 실행하면 console에 출력되는 것을 확인할 수 있다.

 

 

---

 

Babel · The compiler for next generation JavaScript

3가지 방법만 따라 해 봤는데, 위 docs에 여러 방법이 더 있다.

 

코드는 실전 리액트 프로그래밍 책을 보고 따라 했다.

실전 리액트 프로그래밍(개정판)