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

Question

我非常依赖React Native＆＃34;在Chrome中调试＆＃34;功能，因此在Chrome的调试器上。但是我注意到这个系统存在一个巨大的缺陷：我使用ES6-style import导入的模块在Chrome的范围内不可见，即使代码执行正常。这使得使用这些import语句调试代码非常困难。

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

阅读ES6 module import is not defined during debugger之后，我查看了React Native生成的已编译源代码（通过在我的浏览器中加载http://localhost:8081/index.ios.bundle?platform=ios&dev=true）并注意到有问题的模块是以不同的名称加载的：< / p>

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

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

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

谢谢。

Answer 1

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