バンドル後にデベロッパーコンソールからjavascriptオブジェクトにアクセス

Question

私はReactアプリケーションを開発中で、ロープを習っています。私は私の開発環境がDockerで実行されているSPAを持っていて、Gulp + Watchify、Browserify、Babelifyを使ってすべてのJS（X）コードをバンドルし、ブラウザに "bundle.js"として取得します。

私のChromeデベロッパーツールからReactやReactDOMのようなオブジェクトにアクセスできないことを除いて、すべてうまくいきます。私はこれがバンドルされているため「隠されている」ためだと確信していますが、それを修正したり、アクセスを得る方法がわかりません。私はいつも "wi​​ndow.ReactDOM = ReactDOM"を自分のコードで使うことができますが、それは愚かなやり方のように思えますし、コンソールでもっとコードを使いたいと思っています。

コードに「デバッガ」を追加できますが、コードが一時停止しているときにこれらのオブジェクトを使用できますが、実行後はオブジェクトにアクセスできません。

これらのオブジェクトはどのように隠されていますか？また、ブレークポイントの他にもこれらのオブジェクトにアクセスするための良い方法はありますか？

Answer 1

隠されている方法： 変数をウィンドウ/グローバルスコープにリークさせないことはしばしば有用です。上記^

// 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 

に共通の「ラッパー」です：。これは異なるファイルと異なるライブラリーは、同じ変数名とで相互に競合している可能性があるため、通常使用される非常に簡単なトリックのようなものをやっていることが重要です通常のJSファイルを参照してください。

webpackや他のバンドラーの出力を調べると、これがさらに進んで各ファイルが閉じられます。だから、バンドルには、以下のようになります。

(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：各モジュールが意図的に隠された、あなたはvar React = require('react')を行うれるコード内のポイントまで、とにかく匿名です。あなたのコンソールでReactとReactDOMにアクセスする必要がある場合は、window.React = Reactなどの方法よりも良い方法はありません。