在捆绑

Question

我正在研究React应用程序并学习绳索。我有一个SPA，我的开发环境都在Docker中运行，并使用Gulp + Watchify，Browserify和Babelify捆绑我所有的JS（X）代码并将其作为＆＃34; bundle.js＆到达浏览器＃34;

一切正常，但我无法从Chrome开发者工具访问React和ReactDOM等对象。我确定这是因为他们正在隐藏＆＃34;由于它们是如何捆绑在一起的，但我不确定如何解决这个问题或获取对它们的访问权限。我总是可以＆＃34; window.ReactDOM = ReactDOM＆＃34;在我的代码中，但这似乎是愚蠢的方式，我预见想在控制台中使用更多的代码。

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

如何隐藏这些对象，除了断点之外，还有一种理智的方式可以访问它们吗？

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

^以上是一个常见的包装＆＃39;查看常规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等更好的方法了。