🤔 바벨에 대하여 알아보자!

알게될 내용

• 바벨에 대하여 알 수 있다.

• 바벨의 동작 과정을 알 수 있다.

• 바벨의 플러그인에 대해 알 수 있다.

• 바벨의 프리셋에 대해 알 수 있다.

• 폴리필에 대하여 알 수 있다.

개요

npm install -D @babel/core @babel/cli

• @babel/core : 바벨 기본적인 기능

• @babel/cli : 터미널 환경에서(command) 사용하기 위함

바벨이란?

등장 배경

바벨 너는 누구니?

바벨의 동작 과정

• 바벨을 수행하는 과정을 빌드라고 함.

• src/app.js

// src/app.js:
const alert = msg => window.alert(msg)

npx babel app.js
# const alert = msg => window.alert(msg);

1. 파싱 (Parsing)
코드를 읽고 추상 구문 트리(AST) 로 변환하는 단계
파싱 단계에서는 const 토큰, alert 토큰, = 토큰 등으로 하나 토큰으로 분해하는 과정

2. 변환 (Transforming)
추상 구문 트리를 변경 (실제 코드 변경 단계)
ES6 로 되어 있는 코드를 ES5 로 변환?

3. 출력 (Printing)
변경된 결과물 출력
 

플러그인

커스텀 플러그인을 구현해 보면서 자세히 알아보자!

• 블로그 참고

// myplugin.js:
module.exports = function myplugin() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name // path.node.name 은 파싱된 결과물에 접근 가능 (토큰 값)

        // 바벨이 만든 AST 노드를 출력한다
        console.log("Identifier() name:", name)

        // 변환작업: 코드 문자열을 역순으로 변환한다
        path.node.name = name.split("").reverse().join("")
      },
    },
  }
}

npx babel app.js --plugins ./myplugin.js

• --plugins 옵션을 통해 플러그인을 추가해 바벨을 실행시킬 수 있다.

npx babel ./babel-app.js --plugins ./babel/my-babel-plugin.js

# Identifier() name: alert
# Identifier() name: msg
# Identifier() name: window
# Identifier() name: alert
# Identifier() name: msg

# const trela = gsm => wodniw.trela(gsm);

• 변환 작업을 통해 path.node.name 값이 역순으로 출력된 것을 확인할 수 있다.

// myplugin.js:
module.exports = function myplugin() {
  return {
    visitor: {
      // https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-block-scoping/src/index.js#L26
      VariableDeclaration(path) {
        console.log("VariableDeclaration() kind:", path.node.kind) // const

        if (path.node.kind === "const") {
          path.node.kind = "var"
        }
      },
    },
  }
}

플러그인을 사용해 바벨 작업하기

• @babel/plugin-transform-block-scoping
block-scoping 플러그인으로 const, let 와 같은 블록 스코핑을 따르는 예약어를 var 로 변환한다.

• @babel/plugin-transform-arrow-functions
arrow-functions 플러그인을 이용해서 화살표 함수를 일반 함수로 변경할 수 있다.

• @babel/plugin-transform-strict-mode
strict-mode 플러그인은 use strict 구문을 추가한다.

npm install -D @babel/plugin-transform-block-scoping \
  @babel/plugin-transform-arrow-functions \
  @babel/plugin-transform-strict-mode

npx babel ./babel-app.js \
  --plugins @babel/plugin-transform-block-scoping \
  --plugins @babel/plugin-transform-arrow-functions \
  --plugins @babel/plugin-transform-strict-mode

# "use strict";
# 
# var alert = function (msg) {
#  return window.alert(msg);
# };

• 이렇게 변환된 것을 확인할 수 있다.

// babel.config.js:
module.exports = {
  plugins: [
    "@babel/plugin-transform-block-scoping",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-strict-mode",
  ],
}

• 바벨은 plugins 배열을 통해 플러그인을 추가할 수 있다.

npx babel app.js

# "use strict";
# 
# var alert = function (msg) {
#   return window.alert(msg);
# };

프리셋

커스텀 프리셋

// mypreset.js
module.exports = function mypreset() {
  return {
    plugins: [
      "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-block-scoping",
      "@babel/plugin-transform-strict-mode",
    ],
  }
}

// babel.config.js
module.exports = {
  presets: ["./mypreset.js"],
}

• 바벨에서 프리셋을 사용한다면, presets 배열에 추가해야한다.

프리셋 사용하기

• preset-env
ES6+ 이상을 변환할 때 사용

• preset-react
리액트를 변환하기 위한 프리셋

• preset-typescript
타입스크립트를 변환하기 위한 프리셋

env 프리셋 사용해보기!!

npm install -D @babel/preset-env

// babel.config.js:
module.exports = {
  presets: ["@babel/preset-env"],
}

npx babel app.js

# "use strict";
# 
# var alert = function alert(msg) {
#  return window.alert(msg);
# };

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          // chrome: "79",
          ie: "11", // ie 11까지 지원하는 코드를 만든다
        },
      },
    ],
  ],
}

npx babel app.js

# "use strict";
# 
# var alert = function alert(msg) {
#   return window.alert(msg);
# };

폴리필

// app.js
const alert = (msg) => window.alert(msg);

new Promise();

npx babel app.js

# "use strict";
# ... (앞으로 기존의 const, arrow 함수는 생략하겠다.)
# new Promise();

env 프리셋에서 폴리필 사용하기

// babel.config.js:
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage", // 폴리필 사용 방식 지정
        corejs: {
          // 폴리필 버전 지정
          version: 2,
        },
      },
    ],
  ],
}

• useBuiltIns
어떤 방식으로 폴리필을 사용할지 설정하는 옵션
default 값은 false 이고, usage, entry 로 폴리필을 사용할 수 있다.

npx babel src/app.js

# "use strict";
# 
# require("core-js/modules/es6.object.to-string.js");
# 
# require("core-js/modules/es6.promise.js");
# 
# ...
# 
# new Promise();

웹팩과 통합

npm install -D babel-loader

// webpack.config.js:
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader", // 바벨 로더를 추가한다
      },
    ],
  },
}

// require("core-js/modules/es6.object.to-string.js");
// 
//  require("core-js/modules/es6.promise.js");

npm i core-js@2

npx webpack

정리

• 바벨탑이 서로의 언어가 달라져 실패했듯이, 같은 JS라도 브라우저마다 차이가 있는데 이런 차이점을 공통된 형태로 변환해주는 것이 바벨이라는 것을 알게되었다.
이렇게 서로 다른 브라우저에서 사용할 수 있게 변환(트랜스컴파일링)하는 이유는 일관된 코드를 작성하기 위함이다.

• 바벨의 빌드 과정은 총 3가지 형태(파싱, 변환, 출력)로 동작한다.

• 바벨은 변환 작업할 때 플러그인을 통해 변환 작업을 수행한다.

• 플러그인의 세트를 프리셋이라 한다. (env 등)

• 폴리필이라는 개념도 알아봤다.
바벨을 통해서 변환될 수 있는 작업은 변환이 되지만, ES5- 버전에 없는 개념 (Promise 등)은 변환되지 않기 때문에 폴리필이라는 코드 조각을 추가해서 변환되지 않은 코드도 사용할 수 있게 했다.

• 마지막으로 바벨을 웹팩에서 사용하는 방법을 알아봤다.

reference

• https://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html