在使用 Babel 编译 ES6 代码时，我们可能会遇到一些浏览器不支持的特性。其中，一个常见的问题是部分浏览器缺失 Symbol.toStringTag，导致代码无法正常运行。本文将介绍这个问题的原因和解决方法，并提供示例代码供读者参考。
问题原因
ES6 引入了 Symbol 类型，用于创建唯一的、不可变的值。其中，Symbol.toStringTag 是一个预定义的 Symbol，它用于表示对象的默认字符串描述。例如，我们创建一个类：
class Person {
[Symbol.toStringTag] = 'Person';
constructor(name) {
this.name = name;
}
}当我们使用 console.log 输出该类的实例时，会得到如下结果：
const person = new Person('张三');
console.log(person); // Person { name: '张三' }可以看到，输出结果中包含了类的名称。这是因为该类的 Symbol.toStringTag 属性指定了默认字符串描述。
然而，部分浏览器（如 IE11）并不支持 Symbol.toStringTag，导致代码无法正常运行。这时候，我们需要找到一种解决方法。
解决方法
一种简单的解决方法是使用 Babel 提供的插件 core-js，它可以自动为我们添加缺失的特性。我们只需要在项目中安装该插件：
npm install --save core-js
然后，在 Babel 的配置文件中添加以下代码：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- ------
----------- ------
-------------- -----
------------- ---------------
-
--
-
---------------------------
-
-------- ----
-
--
-
---------------------------
-
-------- -----
-------------- ----
-
-
-
-其中，transform-es2015-symbols 插件的 useBuiltIns 选项指定为 true，表示自动添加缺失的特性。
除了使用 core-js 插件，我们也可以手动添加缺失的特性。例如，我们可以在代码中添加以下 polyfill：
if (!Symbol.toStringTag) {
Symbol.toStringTag = Symbol('toStringTag');
}这段代码表示，如果当前环境不支持 Symbol.toStringTag，就手动为其赋值一个新的 Symbol。
示例代码
下面是一个示例代码，演示了如何使用 Babel 编译 ES6 代码，并解决部分浏览器缺失 Symbol.toStringTag 的问题：
-- -------------------- ---- -------
----- ------ -
-------------------- - ---------
----------------- -
--------- - -----
-
-
-- --------------------- -
------------------ - ----------------------
-
----- ------ - --- -------------
--------------------在编译后的代码中，会自动添加缺失的特性，保证代码能够在所有浏览器上正常运行。
总结
Babel 是一个非常强大的工具，可以帮助我们将 ES6 代码转换为兼容性更好的代码。然而，在使用 Babel 编译代码时，我们可能会遇到一些浏览器不支持的特性。本文介绍了一个常见的问题——部分浏览器缺失 Symbol.toStringTag，并提供了解决方法。希望本文能够帮助读者更好地使用 Babel，编写出更兼容性的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e1bbfeb4cecbf2d3ed911