调试 Babel 转译的 React with Chrome Devtools 时，"this"的值不正确

Question

我有一个React应用程序，它使用以下.babelrc配置与Babel一起传输

{
  "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"绑定到我的事件处理程序，我可以解决调试问题，但我不应该执行额外的步骤。所有这些在巴贝尔5的表现都很好，自从我们换到巴贝尔6后就成了一个问题。

我正在使用webpack来捆绑代码并创建源映射。以下是源地图配置的webpack.config.js摘录

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

Answer 1

不幸的是，在Chrome的Babelified代码中使用调试器时，这是一个现实。要使用ECMAScript规范行为实现箭头函数，需要将this关键字转换为不同的名称，并且目前还没有办法告诉Chrome该如何进行调试。Firefox的开发工具有很多额外的逻辑来解决这样的问题，所以如果你使用Firefox并启用"映射范围"复选框，它可能会正常工作，但它也可能会更慢，因为这不是小事。

一种选择是尝试使用箭头函数转换的spec选项，这将使其在调试时表现得更好，但可能不适用于所有情况。

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