Babel 6: loose 模式

Babel的loose模式将ES6代码转译成ES5代码，loose 模式是不太忠实于ES6语义的。这篇博客解释了它是怎么工作的以及它的优点与缺点（剧透：通常是不推荐的）。

Babel6系列文章的起点：”配置Babel6”[解释基础知识：配置文件、presets、插件,等]

1. 两种模式

许多Babel的插件有两种模式：

• 尽可能符合ECMAScript6语义的normal模式。

• 提供更简单ES5代码的loose模式。

通常，推荐不使用loose模式，使用这种模式的优点和缺点是：

• 优点：生成的代码可能更快，对老的引擎有更好的兼容性，代码通常更简洁，更加的“ES5化”。

• 缺点：你是在冒险——随后从转译的ES6到原生的ES6时你会遇到问题。这个险是很不值得冒的。

1.1 切换到loose模式

es2015-loose是标准的ES6 预设（preset）es2015的loose版。这个预设的代码对什么样的插件有loose模式以及怎样开启提供了很好的说明。以下是代码截选：

module.exports = {
    plugins: [
      ···
      [require("babel-plugin-transform-es2015-classes"), {loose: true}],
      require("babel-plugin-transform-es2015-object-super"),
      ···
    ]
};

这是一个CommonJS模块，可以使用任何的ECMAScript 5，如果你通过.babelrc 或者package.json配置babel（详细配置），你需要使用JSON。也可以包含preset：

···
  "presets": [
    ···
    "es2015-loose",
    ···
  ],
 ···

也可以单独引入插件：

 ···
 "plugins": [
   ···
   ["transform-es2015-classes", {loose: true}],
   "transform-es2015-object-super",
   ···
 ],
 ···

2. 例子：normal模式与loose模式的输出

让我们看看模式如何影响下面代码的编译：

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return `(${this.x}, ${this.y})`;
    }
}

2.1 normal模式

在normal模式下，类的prototype 方法是通过Object.defineProperty 添加的（第A行），来确保它们是不可以被枚举的，这是ES6规范所要求的。

   "use strict";

    var _createClass = (function () {
        function defineProperties(target, props) {
            for (var i = 0; i < props.length; i++) {
                var descriptor = props[i];
                descriptor.enumerable = descriptor.enumerable || false;
                descriptor.configurable = true;
                if ("value" in descriptor) descriptor.writable = true;
                Object.defineProperty(target, descriptor.key, descriptor); // (A)
            }
        }
        return function (Constructor, protoProps, staticProps) {
            if (protoProps) defineProperties(Constructor.prototype, protoProps);
            if (staticProps) defineProperties(Constructor, staticProps);
            return Constructor;
        };
    })();

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

    var Point = (function () {
        function Point(x, y) {
            _classCallCheck(this, Point);

            this.x = x;
            this.y = y;
        }

        _createClass(Point, [{
            key: "toString",
            value: function toString() {
                return "(" + this.x + ", " + this.y + ")";
            }
        }]);

        return Point;
    })();

2.2 loose 模式

在loose模式下，用通常的赋值方式添加方法（第A行），这种风格更像你用ES5手动编写代码。

     "use strict";

    function _classCallCheck(instance, Constructor) { ··· }

    var Point = (function () {
        function Point(x, y) {
            _classCallCheck(this, Point);

            this.x = x;
            this.y = y;
        }

        Point.prototype.toString = function toString() { // (A)
            return "(" + this.x + ", " + this.y + ")";
        };

        return Point;
    })();