Opieram się głównie na funkcji "Debugowanie w przeglądarce" React Native, a więc na debugerze Chrome. Ale zauważyłem ogromną wadę tego systemu: moduły, które importuję przy użyciu ES6-style import, nie są widoczne w zakresie w Chrome, mimo że kod działa dobrze. To sprawia, że kod debugowania za pomocą tych instrukcji importowania jest bardzo trudny.Debugowanie instrukcji importowania ES6 za pomocą Native Native w Chrome
Jeśli zamienić instrukcję import na var MyModule = require(...), wówczas moduł jest widoczny w zakresie.
Po przeczytaniu ES6 module import is not defined during debugger Wziąłem spojrzeć na transpiled kodu źródłowego produkowanego przez React Native (ładując http://localhost:8081/index.ios.bundle?platform=ios&dev=true w przeglądarce) i zauważyłem, że moduł w pytaniu jest ładowany pod inną nazwą:
var _MyModule = require('MyApp/MyModule.js');
var _MyModule2 = babelHelpers.interopRequireDefault(_MyModule);
i rzeczywiście mogę używać _MyModule2 w Chrome. Mam kilka powiązanych pytań:
- Mapy źródłowe wydają się niesamowitą technologią! Dlaczego nie obsługują też nazw zmiennych mapowania?
- Czy jest jakiś sposób, aby debugowanie z instrukcjami
importbyło łatwiejsze w Chrome z React Native? Na przykład, zwykłem przesuwać myszą nad zmienną w Chrome, aby zobaczyć wartość, ale nie jest to już możliwe z tymi importami. (Debugging with chrome with es6 proponuje umożliwienie#enable-javascript-harmonyw Chrome i wyłączenie mapy źródłowe, ale biorąc pod uwagę kod przepływu i uglification wątpię to będzie działać dobrze.)
Dziękuję.
Zauważyłem także, że zmienna 'this' zachowuje się inaczej między debuggerem Chrome a kodem transpilowanym. Jeśli korzystam z funkcji strzałek, kod wygląda dobrze w debugerze, ale czasami pojawia się '_to. nie jest funkcją po uruchomieniu kodu. Czy to też jest oczekiwane? –
Nie mogę użyć _MyModuł. Na przykład, oto, co widzę w pliku pakietu: 'var _MainContainer = require (565/* ./MainContainer * /); var _MainContainer2 = babelHelpers.interopRequireDefault (_MainContainer);' Ale nie jest dostępny w konsoli chrome. Nie mogę niczego znaleźć poprzez inspekcję obiektu 'window'. –
Nie mogę nawet przypisać czegoś do 'window.something = foo'. Zastanawiam się nad tym przez jakiś czas, ale po prostu pozwól temu odejść. Jest to jednak problem, ponieważ byłem w konsoli cały czas testując kod. –