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

Question

我正在开发 React 应用程序并正在学习技巧。我有一个 SPA，其中我的开发环境全部是运行 in Docker，并且正在使用 Gulp + Watchify、Browserify 和 Babelify 来捆绑我所有的 JS(X) 代码并获取它作为 "bundle.js".

到浏览器

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

我注意到我可以将 "debugger" 添加到我的代码中，这些对象在代码暂停时可用，但一旦它运行我就无法访问这些对象。

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

Answer 1

它们是如何隐藏的： 不将变量泄漏到 window/global 范围通常很有用。这很重要，因为不同的文件和不同的库可能具有相同的变量名并相互冲突。通常使用的一个非常简单的技巧是做类似的事情：

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

^ 以上是常见的 'wrapper' 常见的 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 等更好的方法了

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

Access javascript objects from dev console after bundling

javascript

bundle

browserify

reactjs