使用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 。 這應該可以解決您的問題。