Babel 6 松散模式

英文原文：2ality.com/2015/12/bab…

作者：minwe

中文：csspod.com/babel6-loos…

想必每个写 JavaScript 的都或多或少了解过 ES5 引入的严格模式，Babel 6 在把 ES6+ 代码转换为 ES5 时，也提供了「松散模式」（loose mode）的选项。Babel 的松散模式和 ES5 没有任何关系，这里提 ES5 严格模式只是在概念上作一个比对，方便理解 Babel 的松散模式。

两种模式

一些 Babel 插件有两种工作模式：

标准模式：转换时尽可能遵循、接近 ES6 语义。
松散模式：转换为简单的 ES5 实现。

松散模式的优、缺点显而易见：

优点：转换出来的代码更简洁，没有为了接近 ES6 而添加的繁杂逻辑，文件更小，运行速度更快，兼容性更好。
缺点：以后直接使用原生 ES6 时可能会遇到问题。需要留意。

一般而言，不建议使用松散模式，不过也可以综合考虑项目的复杂程度，结合实际做选择。

配置方式

可以直接使用 babel-preset-es2015-loose：

{
 "presets": [
   "es2015-loose"
  ],
}

具体到某个插件时，可以设置 loose 参数为 true：

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

转换结果比较

以下面的代码为例：

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

  sayHi() {
    return `Hi, this is ${this.name}`;
  }
}

.babelrc 配置为标准模式时：

{
  "presets": [
    "es2015"
  ]
}

转换以后的代码为：

"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); } } 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 Person = function () {
  function Person(name) {
    _classCallCheck(this, Person);

    this.name = name;
  }

  _createClass(Person, [{
    key: "sayHi",
    value: function sayHi() {
      return "Hi, this is " + this.name;
    }
  }]);

  return Person;
}();

使用 loose preset 后：

{
  "presets": [
    "es2015-loose"
  ]
}

转换结果为：

"use strict";

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

var Person = function () {
  function Person(name) {
    _classCallCheck(this, Person);

    this.name = name;
  }

  Person.prototype.sayHi = function sayHi() {
    return "Hi, this is " + this.name;
  };

  return Person;
}();

确实更像熟悉的 ES5 代码。

该如何选择，自己看着办咯。

其它

fecoding.cn/2016/08/10/…

关注微信公众号，发现更多精彩内容