Babel 6 松散模式

英文原文：https://2ality.com/2015/12/babel6-loose-mode.html

作者：minwe

中文：https://csspod.com/babel6-loose-mode/

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

两种模式

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

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

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

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

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

配置方式

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

1
2
3
4
5
{
 "presets": [
   "es2015-loose"
  ],
}

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

1
2
3
4
5
6
{
  "plugins": [
    ["transform-es2015-classes", {loose: true}],
    "transform-es2015-object-super"
  ]
}

转换结果比较

以下面的代码为例：

1
2
3
4
5
6
7
8
9
class Person {
  constructor(name) {
    this.name = name;
  }

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

.babelrc 配置为标准模式时：

1
2
3
4
5
{
  "presets": [
    "es2015"
  ]
}

转换以后的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"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 后：

1
2
3
4
5
{
  "presets": [
    "es2015-loose"
  ]
}

转换结果为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"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 代码。

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

其它

https://fecoding.cn/2016/08/10/the-loose-mode-babel-6/