一种选择是尝试使用箭头函数转换的 spec 选项,这应该会使其在调试时表现得更好,但可能不适用于所有情况.插件":[["transform-es2015-arrow-functions", {spec: true}]]I have a React application that is transpiled with Babel using the following .babelrc configuration{ "presets": [ "es2015", "stage-1", "react" ], "plugins": [ "transform-decorators-legacy" ]}The application transpiles and runs fine. However, when I debug event handlers (purposely written as arrow functions), the Chrome debugger displays the value of "this" as null. Here is a sample event handlerhandleNext = (event) => { event.preventDefault(); this.gotoPage(this.state.page + 1);}If I set a breakpoint on the first line of the event handler, the debugger displays the value of "this" as null but displays "_this" as the correct value for "this". As I said, the code runs clean, but debugging is frustrating since I cannot simply hover on fields in the code to see their value. I can work around the debugging issue if I bind "this" to my event handler, but I should not have to do that extra step. All of this worked fine in Babel5 and has only been an issue since we switched to Babel6.I am using webpack to bundle the code and create the sourcemaps. Here is an excerpt from my webpack.config.js for sourcemaps configurationplugins: [new webpack.SourceMapDevToolPlugin({ filename: '[name].js.map', include: ['app.js'], columns: false})], 解决方案 Unfortunately this is a fact of life when using the debugger in Babelified code with Chrome. To implement arrow functions with the ECMAScript spec behavior, the this keyword needs to be transformed into a different name, and there's currently no way to tell Chrome what do to for debugging. Firefox's developer tools have a bunch of extra logic to address issues like this, so it may work properly if you're using Firefox and enable to "Map Scopes" checkbox, but it can also be slower because it isn't trivial.One option would be to try to use the spec option of the arrow function transformation, which should make this behave better for debugging, but may not work in all cases."plugins": [ ["transform-es2015-arrow-functions", {spec: true}]] 这篇关于“this"的值使用 Chrome Devtools 调试 Babel 转译 React 时不正确的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
07-29 14:50
查看更多