5

我有一个使用以下 .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 中用于 sourcemaps 配置的摘录

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

1 回答 1

7

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

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

"plugins": [
    ["transform-es2015-arrow-functions", {spec: true}]
]
于 2016-04-21T01:48:30.090 回答