使用Chrome中的React Native调试ES6导入语句

Question

我非常依赖React Native的“Chrome in Debug”功能，因此依赖于Chrome的调试器。 但是我注意到这个系统存在一个巨大的缺陷：我使用ES6风格的导入导入的模块在Chrome的范围内是不可见的，即使代码执行正常。 这使得使用这些import语句调试代码变得非常困难。

如果我用var MyModule = require(...)替换import语句，那么该模块在范围内可见。

在阅读ES6模块后， 在调试器中没有定义导入我查看了React Native生成的转换源代码（通过在我的浏览器中加载http://localhost:8081/index.ios.bundle?platform=ios&dev=true ）和注意到有问题的模块是以不同的名称加载的：

var _MyModule = require('MyApp/MyModule.js');
var _MyModule2 = babelHelpers.interopRequireDefault(_MyModule);

事实上我可以在Chrome中使用_MyModule2 。 我有几个相关的问题：

1. 源地图看起来像一个惊人的技术！ 他们为什么不支持映射变量名呢？
2. 在使用React Native的Chrome中，有没有办法更轻松地使用import语句进行调试？ 例如，我习惯于将鼠标移动到Chrome中的变量上以查看值，但这些导入不再可能。 （ 使用带有es6的chrome进行调试建议在Chrome中启用#enable-javascript-harmony并关闭源地图，但考虑到Flow代码和uglification，我怀疑这样做会很好。）

谢谢。

Answer 1

我在Chrome标记中启用了Chrome实验性功能，使用ES6样式的导入时没有问题。 如果还没有，请在地址栏中键入chrome://flags并查找Experimental JavaScript 。 这应该可以解决您的问题。