前言
在前端开发中，我们经常会使用到 ES6 的语法，并且由于部分浏览器不支持 ES6，我们需要使用 Babel 来将 ES6 代码转译成 ES5 代码，以保证代码在现代浏览器上的正常运行。然而，在使用 Babel 编译 ES6 代码后，有时候会出现 “Cannot read property'symbol' of undefined” 错误，这给我们的开发带来了一定的困扰。在本篇文章中，我将会分享一个针对这个问题的解决方案。
问题的原因
在编译 ES6 代码时，Babel 会将一些 ES6 的语法转换成 ES5 的语法，其中就包括了 Symbol 类型。然后，Babel 会使用一个叫做 Babel polyfill 的库来填补一些 ES5 不支持的功能，其中就包括了 Symbol 的转换。
然而，如果我们在代码中使用了 Symbol，而又没有正确的配置 Babel polyfill，那么就会出现 “Cannot read property'symbol' of undefined” 错误。
解决方案
我们可以通过以下步骤来解决这个问题：
1. 安装 Babel polyfill
我们可以使用以下命令来安装 Babel polyfill：
--- ------- ------ ---------------
2. 在代码中引入 Babel polyfill
在我们的代码中，我们需要在入口文件的顶部引入 Babel polyfill：
------ ------------------
3. 配置 Babel polyfill
我们可以在 babel.config.js 文件中的 presets 中添加以下配置来开启对 Symbol 的支持：
-
--------------------
-
------------ --------
------- -
-
-其中，useBuiltIns 设置为 usage 表示在代码中引入了需要 polyfill 的代码部分才会进行填充，而 corejs 则指定了 polyfill 使用的核心库版本。
配置后的 babel.config.js 文件的示例代码如下：
-------------- - -
-------- -
-
--------------------
-
------------ --------
------- -
-
-
-
--总结
“Cannot read property'symbol' of undefined” 错误出现的原因是 Babel polyfill 没有正确的配置，解决方法是在代码中引入并正确的配置 Babel polyfill。这个问题的解决方案对于前端开发来说是非常有指导意义的，也可以让我们更好的了解 ES6 和 Babel 的转换工作原理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f83d13f6b2d6eab305dd55