调试Babel时,"this"的值不正确,与Chrome Devtools进行了反应

Question

我有一个使用以下.babelrc配置使用Babel转换的React应用程序

{
  "presets": [
    "es2015",
    "stage-1",
    "react"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

应用程序转换并运行正常.但是,当我调试事件处理程序(故意写为箭头函数)时,Chrome调试器会将"this"的值显示为null.这是一个示例事件处理程序

handleNext = (event) => {
    event.preventDefault();
    this.gotoPage(this.state.page + 1);
}

如果我在事件处理程序的第一行设置断点,则调试器将"this"的值显示为null,但将"_this"显示为"this"的正确值.正如我所说,代码运行干净,但调试令人沮丧,因为我不能简单地悬停在代码中的字段上以查看它们的值.如果我将"this"绑定到我的事件处理程序,我可以解决调试问题,但我不应该做那个额外的步骤.所有这一切在Babel5中运行良好,自从我们切换到Babel6以来只是一个问题.

我使用webpack捆绑代码并创建源图.以下是我的webpack.config.js中有关源映射配置的摘录

plugins: [
new webpack.SourceMapDevToolPlugin({
  filename: '[name].js.map',
  include: ['app.js'],
  columns: false
})
],

Answer 1

不幸的是,在使用Chrome的Babelified代码中使用调试器时,这是生活中的事实.要使用ECMAScript spec行为实现箭头函数,this需要将关键字转换为不同的名称,并且目前无法告诉Chrome如何进行调试.Firefox的开发人员工具有一堆额外的逻辑来解决这样的问题,所以如果你使用Firefox,它可能会正常工作.

一种选择是尝试使用spec箭头函数转换的选项,这应该使这对于调试更好,但可能不适用于所有情况.

"plugins": [
    ["transform-es2015-arrow-functions", {spec: true}]
]