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

Question

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

如果我import用a 替换一个语句,var MyModule = require(...)那么该模块在范围内是可见的.

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

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

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

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

谢谢.

Answer 1

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