Question

我有一个使用以下.babelrc配置

与Babel一起编译的React应用程序

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

应用程序转换并运行正常。但是，当我调试事件处理程序（故意写为箭头函数）时，Chrome调试器会显示＆＃34;这个＆＃34;的值。为null。这是一个示例事件处理程序

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

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

我正在使用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}]
]

＆＃34;这个＆＃34;的价值在调试Babel时，使用Chrome Devtools转换React是不正确的

1 个答案: