reactjs - 使用 Chrome Devtools 调试 Babel 转译的 React 时， "this"的值不正确

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”绑定(bind)到我的事件处理程序，我可以解决调试问题，但我不必执行该额外步骤。所有这些在 Babel5 中都运行良好，自从我们切换到 Babel6 后才成为一个问题。

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

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

Answer 1

不幸的是，当在 Chrome 中使用 Babel 化代码中的调试器时，这是一个不争的事实。要实现具有 ECMAScript 规范行为的箭头函数，需要将 this 关键字转换为不同的名称，并且目前无法告诉 Chrome 如何进行调试。 Firefox 的开发人员工具有一堆额外的逻辑来解决此类问题，因此如果您使用 Firefox 并启用“映射范围”复选框，它可能会正常工作，但它也可能会变慢，因为它不是微不足道的。

一种选择是尝试使用箭头函数转换的 spec 选项，这应该使其在调试时表现更好，但可能并非在所有情况下都有效。

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