Babel 编译 ES6 Set/Map 问题及解决方法-FunTeaLearn Online Web Tutorials

ES6 引入了 Set 和 Map 两个新的数据结构，它们分别对应了集合和字典这两种数据结构。使用 Set 和 Map 可以更加方便地进行数据的存储和查找。但是，在使用 Babel 编译 ES6 代码时，可能会遇到 Set 和 Map 的兼容性问题。本文将介绍这些问题，并提供解决方法。

问题描述

在使用 Babel 编译 ES6 代码时，如果代码中使用了 Set 或 Map，可能会遇到以下问题：

编译后的代码体积变大，因为 Babel 会将 Set 和 Map 转换为 ES5 的代码，这些代码比原始的 ES6 代码要冗长。
编译后的代码性能变差，因为 ES5 的代码不能像 ES6 的代码一样高效地处理 Set 和 Map。
在某些环境下，比如 IE11，编译后的代码可能无法正常运行，因为 IE11 不支持 ES6 的 Set 和 Map。

解决方法

为了解决上述问题，我们可以使用以下方法：

方法一：使用 polyfill

polyfill 是一种代码库，它能够在不支持某些新特性的浏览器中模拟这些特性。使用 polyfill 可以让我们在不支持 ES6 Set 和 Map 的浏览器中使用它们。常用的 polyfill 库有 core-js 和 babel-polyfill。

使用 core-js 的方法如下：

安装 core-js：
```
npm install core-js --save-dev
```
在代码中引入 core-js：
```
import 'core-js';
```
或者：
```
require('core-js');
```
这样就可以在不支持 ES6 Set 和 Map 的浏览器中使用它们了。

方法二：使用 transform-runtime 插件

transform-runtime 是一个 Babel 插件，它能够将 ES6 中的新特性转换为运行时依赖，从而减少编译后代码的体积。使用 transform-runtime 可以解决编译后代码体积变大的问题。

使用 transform-runtime 的方法如下：

安装 transform-runtime：

npm install @babel/runtime --save-dev
npm install @babel/plugin-transform-runtime --save-dev

在 .babelrc 中配置 transform-runtime：

// www.javascriptcn.com code example
{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

这样就可以使用 transform-runtime 插件来转换 Set 和 Map。

方法三：使用 es6-shim

es6-shim 是一个 polyfill 库，它可以模拟 ES6 中的一些新特性，包括 Set 和 Map。使用 es6-shim 可以解决编译后代码性能变差的问题。

使用 es6-shim 的方法如下：

安装 es6-shim：
```
npm install es6-shim --save-dev
```
在代码中引入 es6-shim：
```
import 'es6-shim';
```
或者：
```
require('es6-shim');
```
这样就可以在不支持 ES6 Set 和 Map 的浏览器中使用它们了。

示例代码

下面是一个使用 Set 和 Map 的示例代码：

const set = new Set([1, 2, 3]);
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

console.log(set.has(2)); // true
console.log(map.get('b')); // 2

使用 Babel 编译后，代码会变成这样：

// www.javascriptcn.com code example
"use strict";

var _classCallCheck = require("@babel/runtime/helpers/esm/classCallCheck");

var _createClass = require("@babel/runtime/helpers/esm/createClass");

var _possibleConstructorReturn = require("@babel/runtime/helpers/esm/possibleConstructorReturn");

var _getPrototypeOf = require("@babel/runtime/helpers/esm/getPrototypeOf");

var _inherits = require("@babel/runtime/helpers/esm/inherits");

var _wrapNativeSuper = require("@babel/runtime/helpers/esm/wrapNativeSuper");

var _defineProperty = require("@babel/runtime/helpers/esm/defineProperty");

var _iterator = require("@babel/runtime/helpers/esm/iterator");

var _slicedToArray = require("@babel/runtime/helpers/esm/slicedToArray");

var _createForOfIteratorHelper = require("@babel/runtime/helpers/esm/createForOfIteratorHelper");

var _Set2 = _interopRequireDefault(require("@babel/runtime/core-js/set"));

var _Map2 = _interopRequireDefault(require("@babel/runtime/core-js/map"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _slicedToArrayLoose(arr, i) { var _arr = new Array(i); for (var _i = 0; _i < i; _i++) { _arr[_i] = arr[_i]; } return _arr; }

function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Object is not iterable"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n === "Map" ? o.keys() : o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _createForOfIteratorHelper(o) { var i = typeof Symbol === "undefined" || o[Symbol.iterator] == null ? undefined : o[Symbol.iterator](); if (i == null) return; var arr = []; var _loop = function _loop() { var step = i.next(); if (step.done) { arr.push("break"); return "break"; } arr.push(step.value); }; while (true) { var ret = _loop(); if (ret === "break") break; } return { arr: arr, "catch": function _catch(err) { if (typeof Symbol === "undefined" || err[Symbol.iterator] == null) { throw err; } var _i = []; var _loop2 = function _loop2() { var step = err[Symbol.iterator]().next(); if (step.done) { _i.push("break"); return "break"; } _i.push(step.value); }; while (true) { var ret = _loop2(); if (ret === "break") break; } return { arr: _i, exhausted: true }; } }; }

function _slicedToArrayLoose$1(arr, i) { var _arr = new Array(i); for (var _i = 0; _i < i; _i++) { _arr[_i] = arr[_i]; } return _arr; }

function _toArray$1(arr) { return _arrayWithHoles$1(arr) || _iterableToArray$1(arr) || _nonIterableRest$1(); }

function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArray$1(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }

function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits$1(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) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

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

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 _wrapNativeSuper$1(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper$1 = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper$1(Class); }

function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }

function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }

var _Set = /*#__PURE__*/function (_Set2) {
  _inherits$1(_Set, _Set2);

  var _super = _createSuper(_Set);

  function _Set() {
    _classCallCheck$1(this, _Set);

    return _super.apply(this, arguments);
  }

  _createClass$1(_Set, [{
    key: "toArray",
    value: function toArray() {
      return _toConsumableArray(this);
    }
  }]);

  return _Set;
}(_wrapNativeSuper$1(_Set2["default"]));

var _Map = /*#__PURE__*/function (_Map2) {
  _inherits$1(_Map, _Map2);

  var _super2 = _createSuper(_Map);

  function _Map() {
    _classCallCheck$1(this, _Map);

    return _super2.apply(this, arguments);
  }

  _createClass$1(_Map, [{
    key: "toArray",
    value: function toArray() {
      return _toConsumableArray(this);
    }
  }]);

  return _Map;
}(_wrapNativeSuper$1(_Map2["default"]));

var set = new _Set([1, 2, 3]);
var map = new _Map([['a', 1], ['b', 2], ['c', 3]]);
console.log(set.has(2)); // true

console.log(map.get('b')); // 2

可以看到，编译后的代码非常冗长。如果我们使用 transform-runtime 插件，代码会变得简洁：

// www.javascriptcn.com code example
"use strict";

var _Set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));

var _Map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var set = new _Set([1, 2, 3]);
var map = new _Map([['a', 1], ['b', 2], ['c', 3]]);
console.log(set.has(2)); // true

console.log(map.get('b')); // 2

这样，我们就可以在不同的浏览器和环境中使用 Set 和 Map 了。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da30b3a941bf71341f0337

Babel 编译 ES6 Set/Map 问题及解决方法