在 ES6 中引入了一种新的基本类型 Symbol，它表示唯一标识符。Symbol 是一个不可变的基本数据类型，不能使用 new 关键字创建实例，只能通过 Symbol() 函数创建一个全局唯一的 Symbol。
在 JavaScript 中使用 Symbol 有许多好处，例如解决属性名冲突问题、实现类的私有属性、实现迭代器等。但是，由于 Symbol 是 ES6 中新增的内容，会存在一些兼容问题。特别是在 IE 浏览器中，对 Symbol 的支持并不完整，这就需要借助 Babel 进行转换处理。
下面我们来看看 Babel 如何处理 Symbol。
Babel 转换 Symbol 的处理方法
Babel 是一个广泛使用的 JavaScript 转换器，可以将 ES6 以上版本的语法转换成浏览器兼容的 ES5 语法。在处理 Symbol 的转换时，Babel 提供了一个插件 @babel/plugin-transform-runtime，它会引入一个辅助函数来解决 Symbol 在不同环境中的兼容问题。
我们先来看一个使用 Symbol 的例子：
const foo = Symbol('foo'); const obj = { [foo]: 'bar' }; console.log(obj[foo]); // bar
在以上代码中，我们使用了 Symbol，定义了一个名称为 foo 的 Symbol，然后将其作为对象的属性名，输出该属性的值为 'bar'。
现在我们将以上代码通过 Babel 转换成 ES5 的语法：
-- -------------------- ---- ------- --- ----------- - ----------------------------------------------------- --- --------------- - --------------------------------------------------------- --- --- - --- ------------------------------- --- --- - --- ------------------------------- ---- ------- ---------------------- -- ---展开代码
可以看到，Babel 通过引入 @babel/runtime-corejs3 模块里的 Symbol 和对象方法，对代码进行了转换处理。
其中，_Symbol$for["default"] 是引入的辅助函数，其作用是生成一个唯一的 Symbol。
_defineProperty["default"] 是 Object 对象上新增的方法 Object.defineProperty() 的近似实现，将 Symbol 当做属性名添加到对象中。
可以看出，Babel 在转换时，引入了一些额外的代码，增加了代码的长度和复杂度。所以，如果项目中使用了大量的 Symbol，会导致打包后的代码体积变大，加载速度变慢。
为了避免这种情况，我们可以使用 @babel/plugin-transform-runtime 插件，将这些辅助函数提取出来，放到单独的模块中，不会影响原来的代码。
@babel/plugin-transform-runtime 的使用
首先，在项目中安装 @babel/runtime 和 @babel/plugin-transform-runtime 两个模块。
npm install --save @babel/runtime @babel/plugin-transform-runtime
然后，在 .babelrc 文件中添加如下配置：
{ "plugins": [ ["@babel/plugin-transform-runtime", { "corejs": 3 }] ] }
配置说明：
@babel/plugin-transform-runtime：表示使用@babel/plugin-transform-runtime插件。corejs: 3：表示引用core-js 3版本的辅助函数库。
运行时，Babel 会将所有需要使用到的辅助函数都放到一个单独的模块中，避免了重复生成的问题。
结语
通过本文的介绍，我们了解到了 Babel 如何处理 Symbol，以及如何使用 @babel/plugin-transform-runtime 插件优化打包后的代码。当我们在项目中使用 Symbol 时，就可以顺利地转换成 ES5 语法，并且在不同环境中都能够正确地运行。
如果您想了解更多有关 Babel 的信息，可以查看 Babel 的官方文档 https://babeljs.io/。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67936ec9504e4ea9bd7b00d8
