Babel 사용해보기

좌측이 ES6+이고, 우측이 구형!

세팅을 해주고

좌측에 코드를 입력하니까

class Animal {
  constructor(name) {
    this.name = name;
  }

  hello() {
    console.log(`Hello, ${this.name}`);
  }
}

우측에 어마무시한 코드가 나오는디..

function _typeof(o) {
  "@babel/helpers - typeof";
  return (
    (_typeof =
      "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
        ? function (o) {
            return typeof o;
          }
        : function (o) {
            return o &&
              "function" == typeof Symbol &&
              o.constructor === Symbol &&
              o !== Symbol.prototype
              ? "symbol"
              : typeof o;
          }),
    _typeof(o)
  );
}
function _classCallCheck(a, n) {
  if (!(a instanceof n))
    throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(e, r) {
  for (var t = 0; t < r.length; t++) {
    var o = r[t];
    (o.enumerable = o.enumerable || !1),
      (o.configurable = !0),
      "value" in o && (o.writable = !0),
      Object.defineProperty(e, _toPropertyKey(o.key), o);
  }
}
function _createClass(e, r, t) {
  return (
    r && _defineProperties(e.prototype, r),
    t && _defineProperties(e, t),
    Object.defineProperty(e, "prototype", { writable: !1 }),
    e
  );
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
  if ("object" != _typeof(t) || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r || "default");
    if ("object" != _typeof(i)) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
var Animal = /*#__PURE__*/ (function () {
  function Animal(name) {
    _classCallCheck(this, Animal);
    this.name = name;
  }
  return _createClass(Animal, [
    {
      key: "hello",
      value: function hello() {
        console.log("Hello, ".concat(this.name));
      }
    }
  ]);
})();

JavaScript ES6+ 클래스와 Babel 변환

Babel이란?

• Babel은 최신 JavaScript 문법(ES6+)을 구형 브라우저에서도 실행 가능한 코드로 변환(transpile) 해주는 도구입니다.
• 이 코드에서 class, template literals 등 ES6 문법을 Babel이 변환한 결과를 보여줍니다.

코드 목적

이 코드는 최신 JavaScript 문법을 사용하는 개발자가 구형 브라우저에서도 코드를 실행할 수 있도록, Babel을 통해 변환된 결과입니다.

원래 ES6+ 코드

class Animal {
  constructor(name) {
    this.name = name;
  }

  hello() {
    console.log(`Hello, ${this.name}`);
  }
}

Babel 변환 결과

위 코드가 아래처럼 변환된 것입니다:

• class가 구형 문법(프로토타입 기반)으로 변환.
• template literals가 문자열 연결(.concat) 방식으로 변환.