我有一个 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”的值显示为空，但将“_this”显示为“this”的正确值。正如我所说，代码运行干净，但调试令人沮丧，因为我不能简单地将鼠标悬停在代码中的字段上以查看它们的值。如果我将“this”绑定到我的事件处理程序，我可以解决调试问题，但我不应该执行那个额外的步骤。所有这些在 Babel5 中都运行良好，并且在我们切换到 Babel6 后才出现问题。

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

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