捆绑后从开发控制台访问 javascript 对象答案

【问题标题】：Access javascript objects from dev console after bundling捆绑后从开发控制台访问 javascript 对象
【发布时间】：2016-06-30 22:13:44
【问题描述】：

我正在开发一个 React 应用程序并学习其中的技巧。我有一个 SPA，我的开发环境都在 Docker 中运行，并且正在使用 Gulp + Watchify、Browserify 和 Babelify 捆绑我所有的 JS(X) 代码并将其作为“bundle.js”提供给浏览器。

一切正常，除了我无法从我的 Chrome 开发人员工具中访问 React 和 ReactDOM 等对象。我确定这是因为它们被“隐藏”了，因为它们是如何被捆绑在一起的，但我不确定如何解决这个问题或获得对它们的访问权限。我总是可以在我的代码中使用“window.ReactDOM = ReactDOM”，但这似乎是一种愚蠢的做法，我预见到想要在控制台中使用更多代码。

我注意到我可以在我的代码中添加“调试器”，这些对象在代码暂停时可用，但一旦运行我就无法访问这些对象。

这些对象是如何被隐藏起来的，除了断点之外，还有没有一种合理的方法可以访问它们？

【问题讨论】：

您是否将 React 开发工具插件添加到 Chrome 中？您应该添加一堆 Chrome 扩展，以便真正轻松探索 React 元素。
另外，当您遇到断点时，您可以在全局上下文中存储任何变量以供以后使用
是的，我添加了 React 开发工具。我正在研究一些通过控制台进行检查的教程，这适用于他们的情况，因为它们没有捆绑 - 只是使用脚本标签来添加所有内容。

标签： javascript reactjs bundle browserify

【解决方案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 等更好的方法了。

【讨论】：