在前端开发中，使用 ES6 编写代码已经是非常普遍的事情了，但是在编译 ES6 代码时，你可能会遇到一个很常见的错误： TypeError: Cannot read property 'argument' of undefined。这个错误通常是由于 Babel 编译器的一些问题引起的。下面，我们将详细介绍这个问题的原因和解决方法。
问题原因
在使用 Babel 编译 ES6 代码时，如果你的代码使用了箭头函数 () => {}，那么可能会遇到这个问题。这是因为在编译箭头函数时，Babel 会将箭头函数转换为普通的函数，并将其中的 this 绑定到当前作用域。但是，在某些情况下，这会导致编译后的代码出现向未定义变量传递参数的情况，从而引发 TypeError 错误。
例如，考虑以下代码：
----- --- - -
-- --
-- -- -- -
--------------------
-
--
--------在这个例子中，当我们运行 obj.b() 时，会出现 TypeError 错误。这是因为在编译后的代码中，this.a 被转化为了一个未定义的变量，从而导致了错误。
解决方法
解决这个问题的方法很简单，我们只需要改变箭头函数的定义方式即可。具体来说，我们可以将箭头函数改为普通的函数，并手动绑定 this 的值。这样，在编译后的代码中，this 就不会被绑定到未定义变量上了。
例如，我们可以将上述的代码改为以下形式：
----- --- - -
-- --
-- -------- -- -
--------------------
-
--
--------在这个例子中，我们使用了普通函数的定义方式，而没有使用箭头函数。这样，在编译后的代码中，this 就会被正确地绑定到 obj 上，不会引起任何错误。
除了将箭头函数改为普通函数之外，我们还可以使用 Babel 的 transform-class-properties 插件来解决这个问题。这个插件可以自动将箭头函数转换为普通函数，并在编译后的代码中将 this 绑定到正确的值上。
例如，我们可以在 Babel 的配置文件中添加以下的配置：
-
---------- -
------------------------------ - ------- ---- --
-
-这样，在编译箭头函数时，Babel 就会自动使用普通函数的定义方式，并在编译后的代码中将 this 绑定到正确的值上。
总结
在使用 Babel 编译 ES6 代码时，可能会遇到 TypeError: Cannot read property 'argument' of undefined 错误。这个错误通常是由于箭头函数在编译时引发的问题导致的。为了解决这个问题，我们可以将箭头函数改为普通函数，并手动绑定 this 的值。另外，我们还可以使用 Babel 的 transform-class-properties 插件来自动解决这个问题。在实际开发中，我们应该根据具体情况选择合适的解决方法，并避免在箭头函数中出现未定义变量传递参数的情况。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652a0e4b7d4982a6ebc6b400