es6 babelify更改变量名称,变量无法在检查器中找到

Question

我在我的应用程序中使用es6模块,并且在我的chrome检查器中调试时遇到问题.当我在我的代码中执行以下操作时:

import 'widget' from './widget'

class SomeClass {
  componentDidMount(){
    debugger; // widget is not defined here according to chrome console!
    widget.doSomething();
  }
}

查看浏览器正在阅读的已编译源文件,我看到应用于原始js文件的babelify转换已将'widget'变量重命名为'_widget_Js'.但是,我已经编译了JS以及源映射,因此chrome检查器显示原始的JS文件,但是当我引用原始的'widget'变量时它不能识别它(它确实看到'_widget_Js'变量,但是我当然我不想每次调试时都要查找已编译的翻译变量!).

有关如何让chrome识别原始导入名称的任何建议？如果它有帮助,我可以提供有关我的设置的更多信息(gulp + browserify + babelify).谢谢!

Answer 1

你真的无能为力。如果 Chrome 实现了对 source map 中映射的支持names，那将会有所帮助。