javascript - 在 Chrome 中使用 React Native 调试 ES6 import 语句

Question

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

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

看完ES6 module import is not defined during debugger我查看了 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. 有没有什么方法可以让在 Chrome 中使用 React Native 使用 import 语句进行调试更容易？例如，我习惯于将鼠标移到 Chrome 中的变量上以查看值，但这些导入不再可能。 (Debugging with chrome with es6 建议在 Chrome 中启用 #enable-javascript-harmony 并关闭源映射，但考虑到 Flow 代码和丑化，我怀疑这是否有效。)

谢谢。

Answer 1

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