[Next.js + TS] 초기세팅 - (3) Babel 개념

이번엔 초기세팅 마지막 시리즈가 될 것 같다! 주제는 Babel 이다.

이전, Babel과 Webpack 에 대해 간단히 공부하면서, Babel은 단순히 트랜스파일러의 역할 정도로 알고 있었떤 툴이다.

 

하지만, 프로젝트에서 절대경로나, SSR 등을 위해서까지 사용해보면서 Babel의 다양한 기능을 정리해보고자 했다!

---

 💛 Babel 이란?

바벨(Babel)은 최신버전(ECMAScript 2015+) 의 JS코드를 상대적으로 구식 브라우저(IE 등) 환경에서 호환되도록 버전을 변환하는데 주로 사용되는 자바스크립트 컴파일러(트랜스파일러)이다. (그렇기에, 입력과 출력 모두 JS)

 

위가 바벨의 주된 기능이며, 현재는 JSX문법(React), TS같은 정적 타입언어, 코드압축, 제안단계(정식문법X) 문법 등을 사용할 수 있는 부가기능들의 목적도 있다.

 

 

- Babel 실행방법

바벨을 실행하는 방법은 다음 4가지가 있다.

1. @babel/cli 커멘드로 실행
2. Webpack 에서 babel-loader 로 실행
3. @babel/core 직접 실행
4. @babel/register 실행

 

 

1. @babel/cli 실행

 

먼저, 바벨을 사용하는 심플한 방법인 CLI 이다. @babel/cli 및 관련 패키지들을 설치하고 실행할 수 있다.

 

// 설치
npm i @babel/core 
@babel/cli 
@babel/plugin-transform-arrow-functions 
@babel/plugin-transform-template-literals
@babel/preset-react

• @babel/cli : 터미널에서 바벨을 사용하기 위해 설치
• @babel/core : 바벨을 이용하기 위한 필수 옵션 패키지
• @babel/plugin : arrow-functions, template-literals (특정 문법을 트랜스파일링 하기 위한 플러그인)
• @babel/preset-react : JSX파일을 컴파일 하기 위해 React 관련 preset 이 필요

 

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

npx babel 로 실행 및 --preset, --plugin 옵션을 통해 컴파일 시 필요한 프리셋과 플러그인을 전달한다.

이렇게 매번 명령줄에 넣지 않고, 통상 설정파일인 babel.config.js 를 사용한다. (바벨7부터 추천, 바벨6까진 .babelrc)

 

* .babelrc vs bable.config.js

npx babel src/code.js

• babel.config.js : 여러 패키지 디렉토리를 가진 프로젝트에서 공통 Babel을 설정할 떄 유용 (보편성)
• .babelrc : 서브셋 디렉토리 혹은 파일에서 특정 플러그인을 변형할 때 유리

 

 

2. Webpack의 babel-loader

 

Webpack은 정적파일들을 번들링해주는 모듈 번들러이다. 여기서도 Babel 활용세팅을 설정할 수 있다.

 

// 설치
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: [] },
};

루트 디렉토리에서 webpack.config.js 파일로 설정하면 된다. 각 행은 아래와 같은 의미이다.

• entry : 웹팩으로 번들링할 진입점이 되는 파일
• output : 번들링 후 출력파일의 경로와 이름. 번들링 결과를 dist/code.bundle.js 파일로 저장
• module > rules : JS파일을 babel-loader 가 처리하도록 설정. 여기서 babel.config.js 파일설정을 참조
• optimization : 웹팩은 기본적으로 JS파일을 압축하지만, Babel 정상 실행여부를 확인하기 위해 압축을 잠시 끔

// 실행
npx webpack

 

 

3. @babel/core

 

@babel/cli 및 babel-loader 모두 @babel/core 를 이용하여 바벨을 실행하는 방법이다.

// runBabel.js (루트 디렉토리)
const babel = require("@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, {
  filename,
  presets,
  plugins,
  configFile: false,
});

console.log(code);

• babel : @babel/core 모듈
• source : 컴파일할 파일의 내용을 가져옴
• presets, plugins : 바벨 플러그인과 프리셋 설정
• code : transformSync 함수를 호출해서 바벨을 실행하는 구문 (configFile: babel.config.js 설정파일 사용여부)

// 실행
node runBabel

@babel/core 모듈을 직접 사용하면 하나의 코드에 다른 설정을 적용할 수 있어, 자유도가 높은 방법이다.

 

 

💛 Babel 컴파일 단계

바벨은 컴파일 시 3단계를 거친다.

• 파싱(parse) 단계 : 입력된 코드로부터 AST(Abstract Syntax Tree) 를 생성한다.
• 변환(transform) 단계 : AST를 원하는 형태로 변환한다.
• 생성(generate) 단계 : AST를 코드로 출력한다.

* AST(Abstract Syntax Tree) : 코드의 구문(syntax)이 분석된 결과를 담는 구조체. 코드가 같다면 AST도 동일.

 

babel.transformSync 함수가 형성한 AST를, 객체 비구조화 할당을 통해 재사용할 수 있게 된다.

이 AST에 대해 다른 옵션을 줄 때마다, babel.transformFromAstSync 함수를 실행하면 코드를 각각 다르게 컴파일할 수 있다.

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

const filename = "./src/code.js";
const source = fs.readFileSync(filename, "utf8");

const presets = ["@babel/preset-react"];

// 공통으로 사용할 AST 생성
const { ast } = babel.transformSync(source, {
  filename,
  ast: true,
  code: false,
  presets,
  configFile: false,
});

// 각각의 plugin을 적용한 코드 생성
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:\n", code1);
console.log("code2:\n", code2);

---

Babel 설정방법을 포스팅하기 전, 기본개념을 공부해보다 분량이 너무 길어져서 2개의 파트로 나누기로 결정했다.

이번 파트는, 바벨의 기본적인 개념과, 설정할 수 있는 다양한 방법들이 존재함을 알게 된 계기였다.

 

사실상, CRA 패키지로 설치하다보니 Webpack 번들링에 포함시키는 게 일반적이며, 그렇기에 다음 포스팅에선 babel.config.js 설정파일을 설정하는 방법에 대해서 중점적으로 다뤄보겠다.

 

 

[참고]

- [Babel] 공식문서 : https://babeljs.io/. 

- [Babel 7] slideshare 기술문서 : https://www.slideshare.net/ssuser2295821/babel-7

- [Babel 설정] https://velog.io/@kwonh/Babel-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95%EA%B3%BC-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EA%B3%BC%EC%A0%95  

- [Babel 개념] poiemaweb : https://poiemaweb.com/es6-babel-webpack-1  

- [Babel 설정] pathas 님의 블로그 : https://pathas.tistory.com/217