Значение "this" неверно при отладке бабела, перенесенного в React с Chrome Devtools

Question

У меня есть приложение React, которое переносится с Babel, используя следующую конфигурацию.babelrc

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

Приложение переносится и работает нормально. Однако, когда я отлаживаю обработчики событий (специально написанные как функции стрелок), отладчик Chrome отображает значение "this" как ноль. Вот пример обработчика события

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

Если я устанавливаю точку останова в первой строке обработчика событий, отладчик отображает значение "this" как нулевое, но отображает "_this" как правильное значение для "this". Как я уже сказал, код работает чисто, но отладка разочаровывает, поскольку я не могу просто навести курсор на поля в коде, чтобы увидеть их значение. Я могу обойти проблему отладки, если свяжу "this" со своим обработчиком событий, но мне не нужно будет делать этот дополнительный шаг. Все это прекрасно работало в Babel5 и было проблемой только с тех пор, как мы перешли на Babel6.

Я использую веб-пакет для связывания кода и создания исходных карт. Вот выдержка из моего webpack.config.js для конфигурации исходных карт

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

Answer 1

К сожалению, это факт жизни при использовании отладчика в Babelified-коде. Для реализации функций стрелок с поведением спецификации ECMAScript, this Ключевое слово необходимо преобразовать в другое имя, и в настоящее время нет способа сообщить Chrome, что нужно делать для отладки.

Одним из вариантов будет попытаться использовать spec опция преобразования функции стрелки, которая должна сделать это лучше для отладки, но может работать не во всех случаях.

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