什么是 Symbol？
Symbol 是 ECMAScript 6 引入的新的基本数据类型，也是一种新的构造函数。它的主要作用是创建一个全局唯一的值，用于对象的属性名或类的私有成员名。
Symbol 值通过 Symbol() 函数生成，每个 Symbol 值都是唯一的，可以作为对象属性名使用，保证不被其他属性名冲突。
--- --- - - ----------- ----- -- ----------------- -- ---------- ------
Babel 中 Symbol 转换工具的配置
由于部分浏览器（如 Safari 和 IE）不支持 Symbol 类型，因此在编写 JavaScript 的时候，我们需要使用 Babel 进行转换，以兼容这些浏览器。
Babel 提供了一个插件 @babel/plugin-transform-runtime，它可以把代码中的 Symbol 转换成特定的 helper 函数，从而实现与浏览器的兼容性。
下面我们来介绍如何在 Babel 中配置 @babel/plugin-transform-runtime 插件。
1. 安装插件
首先，我们需要安装 @babel/plugin-transform-runtime 插件及其依赖：
--- ------- -------------- ------------------------------- ----------
2. 配置 presets 和 plugins
接下来，在 Babel 的配置文件中，我们需要安装 corejs 和 @babel/preset-env 插件，并在 preset-env 中配置 useBuiltIns 和 corejs 选项。
useBuiltIns 选项会自动加载需要的 polyfill，而 corejs 选项会指定使用哪个版本的 polyfill。
-- ---------------
-------------- - -
-------- -
-
--------------------
-
------------ --------
------- --
--
--
--
-------- -
-
----------------------------------
-
------- ------
-------- -----
------------ -----
------------- ------
--
--
--
--3. 使用 Symbol
现在，我们可以在代码中随意使用 Symbol 了，Babel 会自动将其转换成 helper 函数。
-- ------ ----- --- - --------- ----- --- - - ------ ------ -- ---------------------- -- -----
总结
通过上述配置，我们可以在 Babel 中兼容 Symbol 类型，让代码能够跨越不同的浏览器平台。需要注意的是，不同的方案会依赖不同的 polyfill 包，需要按照实际需求进行选择，以免增加代码体积。
在使用 Symbol 的时候，建议将其命名为容易识别的变量，以免出现重复错误。同时，Symbol 是一个相对偏底层的特性，使用时应谨慎考虑，避免引发意想不到的 BUG。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654981937d4982a6eb3b00a3