[Babel] Babel 예제로 공부하기(babel/cli, babel-loader)

초기에 바벨은 ES6코드를 ES5 코드로 변환해 주는 트렌스파일러였다. 현재는 바벨을 이용하여 리액트의 JSX문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법을 사용할 수 있다.

• 바벨을 실행하는 여러가지 방법
  • @babel/cli
  • 웹팩에서 babel-loader로 실행
  • @babel/core를 직접 실행
  • @babel/register로 실행

babel 예제(babel/cli)

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>;
const text = `element type is${element.type}`;
const add = (a, b) => a + b;

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

실행 결과 JSX문법은 createElement로 변환되었음.

템플릿 리터럴은 문자열 concat메서드 호출로 변환되었음.

화살표는 일반 함수로 변환 되었음.

 

 

바벨 6까지는 .babelrc 파일로 설정값을 관리했지만, 바벨 7부터는 babel.config.js 파일로 관리하는 것을 추천함.

바벨 설정 파일은 크게 두 가지 종류로 나눌 수 있다.

첫 번째는 모든 자바스크립트 파일에 적용되는 전체 설정 파일이다. 바벨 버전7에 추가된 babel.config.js 파일이 전체 설정 파일 이다.

두 번째 자바스크립트 파일의 경로에 따라 결정되는 지역 설정 파일이다.

.babelrc, .babel.js 파일과 바벨 설정이 있는 package.json 파일이 지역 설정 파일이다.

 

 

babel.config.js

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 를 입력하면 이전과 같은 결과를 확인 가능함.

 

 

babel 예제(웹팩의 babel-loader로 실행)

npm install webpack webpack-cli babel-loader

webpack.config.js 파일을 만든다.

webpack.config.js

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

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

output : 번들링된 결과를 dist/code.bundle.js 파일로 저장한다.

module : 자바스크립트 파일을 babel-lodader가 처리하도록 설정한다

optimization : 웹팩은 기본적으로 자바스크립트 파일을 압축한다. 허나 바벨이 제대로 실행됐는지 확인하기 위해 압축 기능을 잠시 끈다.

 

npx webpack 를 입력하면 dist 폴더가 생김

npx webpack

code.bundle.js

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is".concat(element.type);

const add = function (a, b) {
  return a + b;
};
/******/ })()
;

code.bundle.js 파일이 다음과 같이 생성됨

 

 

확장성과 유연성을 고려한 바벨 설정 방법

npm init -y

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

루트 위치에서 common/.babelrc 를 만듬

./babelrc

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-transform-template-literals",
      {
        "loose": true
      }
    ]
  ]
}

plugins에 옵션을 설정할 때는 배열로 만들어서 두 번째 자리에 옵션을 넣는다.

loose 옵션을 넣어주면 문자열을 연결할 때 concat 메서드를 사용하는 대신 + 연산자를 사용한다.

src/example-extends

폴더를 만든다.

src/example-extends/.babelrc

{
  "extends": "../../common/.babelrc",

  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-template-literals"
  ]
}

extends: 다른 파일에 있는 설정을 가져온다.

plugins를 이용하여 설정을 추가한다.

src/example-extends/code.js

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

npx babel src/example-extends/code.js 를 입력하게 되면 아래와 같이 알맞게 결과를 볼 수 있음

 

 

조금 추가로 env 속성 사용 예제를 알아 보도록 하겠음.

src/example-env/.babelrc

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-template-literals"
  ],
  "env": {
    "prodution": {
      "presets": ["minify"]
    }
  }
}

env : env 속성을 이용하면 환경별로 다른 설정을 줄 수 있다.

프로덕션 환경에서는 압축 프리셋을 사용하도록 설정한다.