javascript - 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 实现了对源映射 names 中的映射的支持，那将有所帮助。