Доступ к объектам javascript из консоли dev после комплектации

Question

Я работаю над приложением React и изучаю веревки. У меня есть SPA, где моя среда для разработчиков работает в Docker, и использует Gulp + Watchify, Browserify и Babelify, чтобы связать весь мой код JS (X) и получить его в браузере как «bundle.js».

Все работает хорошо, за исключением того, что я не могу получить доступ к таким объектам, как React и ReactDOM, из моих инструментов разработчика Chrome. Я уверен, что это происходит потому, что они «скрыты» из-за того, что они собраны, но я не уверен, как исправить это или получить к ним доступ. Я всегда могу «window.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 и т. Д.