Zugriff auf JavaScript-Objekte aus der Dev-Konsole nach dem Bündeln

Question

Ich arbeite an einer React App und lerne die Seile. Ich habe ein SPA, in dem meine Entwicklungsumgebung in Docker läuft, und verwendet Gulp + Watchify, Browserify und Babelify, um meinen gesamten JS (X) -Code zu bündeln und als "bundle.js" zum Browser zu bekommen.

Alles funktioniert gut, außer dass ich auf Objekte wie React und ReactDOM von meinen Chrome-Entwicklertools nicht zugreifen kann. Ich bin mir sicher, dass dies daran liegt, dass sie "versteckt" werden, weil sie gebündelt sind, aber ich bin mir nicht sicher, wie ich das beheben oder Zugang zu ihnen bekommen kann. Ich kann immer "window.ReactDOM = ReactDOM" in meinem Code, aber das scheint wie der dumme Weg zu gehen, und ich sehe voraus, dass ich mit mehr Code in der Konsole spielen möchte.

Ich bemerkte, dass ich "Debugger" zu meinem Code hinzufügen kann, und diese Objekte sind verfügbar, wenn der Code pausiert ist, aber sobald es ausgeführt wird, kann ich nicht auf die Objekte zugreifen.

Wie werden diese Objekte versteckt, und gibt es einen vernünftigen Weg, um sie außer Breakpoints zu erreichen?

Answer 1

Wie sie ausgeblendet sind: Es ist oft sinnvoll, Variablen nicht in den Fenster/globalen Bereich zu leasen. Dies ist wichtig, da verschiedene Dateien und verschiedene Bibliotheken, konnten die gleichen Variablennamen und miteinander in Konflikt geraten in haben ein sehr einfacher Trick verwendete in der Regel ist, etwas zu tun.

// Runs an inline anonymous function 
(function(){ 
    /// Make your variables and run your code here ... 
    var a = 1; // Only accessible in this function 
})(); 
console.log(a) // Undefined 

^Das Vorstehende ist ein gemeinsamer ‚Wrapper‘ zu Sehen Sie sich eine normale JS-Datei an.

Wenn Sie die Ausgabe des Webpacks oder eines anderen Bundlers untersuchen, gehen sie einen Schritt weiter und machen eine Schließung für jede Datei. So wird das Bündel in etwa so aussehen:

(function(){ 
    var files = [ 
     function(module, require){ var ReactDOM = require('react-dom')... /* file one code */} 
     function(module, require){ ... module.exports = localReactDomVar ... } 
    ] 

    // Webpack magic runs each file and recursively gets dependencies on calls to require... 
})(); 

TLDR: Jedes Modul absichtlich verborgen und anonym ist ohnehin bis zu dem Punkt in Ihrem Code, an den Sie var React = require('react') tun. Wenn Sie in Ihrer Konsole auf React und ReactDOM zugreifen müssen, gibt es keinen besseren Weg als window.React = React usw.