Babel 编译 ES6 class 继承

随着前端技术的不断发展，ES6 的 class 继承已经成为了前端开发中不可或缺的一部分。然而，在一些低版本浏览器中并不支持 ES6 class 继承，这就需要借助 Babel 进行编译转换。

Babel 简介

Babel 是一个 JavaScript 编译器，它的主要作用是将最新的 JavaScript 语法转换成支持当前浏览器的低版本 JavaScript 语法。Babel 可以将 ES6、ES7 等最新的 JavaScript 语法转换成 ES5 的语法。

ES6 class 继承是一个非常强大的特性，但是在一些低版本浏览器中并不支持。因此，我们需要使用 Babel 将 ES6 class 继承转换成 ES5 的语法，以保证代码在低版本浏览器中的兼容性。

安装 Babel

首先，我们需要安装 Babel。Babel 的安装非常简单，只需要在命令行中执行以下命令即可：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

配置 Babel

Babel 的配置非常灵活，我们可以根据自己的需求进行配置。在这里，我们只需要简单地配置一下 Babel，使其能够编译 ES6 class 继承即可。

在项目根目录下新建一个名为 .babelrc 的文件，输入以下内容：

{
  "presets": ["@babel/preset-env"]
}

这里我们使用了 @babel/preset-env 这个 preset，它可以根据当前的环境自动确定需要转换的 JavaScript 语法。

编译 ES6 class 继承

现在，我们已经完成了 Babel 的安装和配置，接下来就可以开始编译 ES6 class 继承了。

假设我们有如下的 ES6 class 继承代码：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rufus');
dog.speak();

我们可以使用 Babel 将其编译成 ES5 的语法：

// javascriptcn.com 代码示例
"use strict";

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf(subClass, superClass);
}

function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }
  return _assertThisInitialized(self);
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return self;
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;
  try {
    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
    return true;
  } catch (e) {
    return false;
  }
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Animal = /*#__PURE__*/function () {
  function Animal(name) {
    _classCallCheck(this, Animal);

    this.name = name;
  }

  Animal.prototype.speak = function speak() {
    console.log("".concat(this.name, " makes a noise."));
  };

  return Animal;
}();

var Dog = /*#__PURE__*/function (_Animal) {
  _inherits(Dog, _Animal);

  var _super = _createSuper(Dog);

  function Dog() {
    _classCallCheck(this, Dog);

    return _super.apply(this, arguments);
  }

  Dog.prototype.speak = function speak() {
    console.log("".concat(this.name, " barks."));
  };

  return Dog;
}(Animal);

var dog = new Dog('Rufus');
dog.speak();

可以看到，Babel 将 ES6 class 继承转换成了 ES5 的语法，并且添加了一些额外的代码，以保证代码的正确性。

总结

通过本文的介绍，我们了解了如何使用 Babel 编译 ES6 class 继承，并且掌握了 Babel 的基本用法。在实际开发中，我们可以根据自己的需求进行 Babel 的配置，以实现更加灵活的编译转换。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587da86eb4cecbf2dd11a5a