Mi affido molto alla funzione "Debug in Chrome" di React Native e quindi al debugger di Chrome. Ma ho notato un enorme difetto con questo sistema: i moduli che importano utilizzando uno ES6-style import non sono visibili nell'ambito in Chrome anche se il codice viene eseguito correttamente. Ciò rende molto difficile il codice di debug che utilizza queste istruzioni di importazione.Debug delle istruzioni di importazione ES6 con React Native in Chrome
Se si sostituisce una dichiarazione import con un var MyModule = require(...), il modulo è visibile nell'ambito.
Dopo aver letto ES6 module import is not defined during debugger ho preso uno sguardo al codice sorgente transpiled prodotto da React Native (caricando http://localhost:8081/index.ios.bundle?platform=ios&dev=true nel mio browser) e ho notato che il modulo in questione viene caricato con un nome diverso:
var _MyModule = require('MyApp/MyModule.js');
var _MyModule2 = babelHelpers.interopRequireDefault(_MyModule);
e infatti posso usare _MyModule2 in Chrome. Ho un paio di domande correlate:
- Le mappe di origine sembrano una tecnologia incredibile! Perché non supportano anche il mapping dei nomi delle variabili?
- C'è un modo per rendere più facile il debugging con le dichiarazioni
importin Chrome con React Native? Ad esempio, sono abituato a muovere il mouse su una variabile in Chrome per vedere il valore, ma non è più possibile con queste importazioni. (Debugging with chrome with es6 suggerisce consentendo#enable-javascript-harmonyin Chrome e spegnendo le mappe di origine, ma dato il codice di flusso e abbellimento dei Dubito che questo avrebbe funzionato bene.)
Grazie.
Ho anche notato che la variabile 'this' si comporta in modo diverso tra il debugger di Chrome e il codice transpiled a volte. Se uso le funzioni di freccia, il codice sembra a posto nel debugger, ma occasionalmente mi capita di fare questo. non è una funzione quando eseguo il codice. Anche questo è previsto? –
Non riesco a utilizzare _MyModule. Ad esempio, ecco cosa vedo nel file bundle: 'var _MainContainer = require (565/* ./MainContainer * /); var _MainContainer2 = babelHelpers.interopRequireDefault (_MainContainer);' Ma non è disponibile nella console di Chrome. Non riesco a trovare nulla controllando l'oggetto 'window'. –
Non riesco nemmeno ad assegnare qualcosa a 'window.something = foo'. Mi sono chiesto questo per un po ', ma ho lasciato perdere. È un problema, però, perché ero sempre nella console per testare il codice. –