webpack 是如何解决全球污染的？

Question

假设我有 3 个函数。如果我将它们一个接一个地写下来，一个接一个地写，它们都将暴露在全局命名空间中，从而导致全局污染。所以一种方法似乎如下。

var test;
(function() {

 test.funct1 = function(){

 }

 test.funct2 = function(){

 }

 test.funct3 = function(){

 }

})

现在，我们减少了问题，因为函数没有放入全局命名空间。我们可以说，它们仍然是，但不完全是。 test 将放在全局 namespace 上，它上面有所有其他功能。

问题1）现在问题依旧，如果有人或者某个图书馆有test，问题是我的test和图书馆的test会发生碰撞，貌似太糟糕了。人们如何在没有任何 library/framework 或其他任何东西（没有 webpack）的情况下解决这个问题？

问题2）好的，那么webpack确实解决了上面的问题。在 webpack 中，每个文件都是模块。这是可以理解的，但是，一个很好的例子会很棒，有些东西仍然需要放在全球范围内。我会很感激一个很好的例子。

Answer 1

Now, the problem still exists, if someone or some library has test , the problem is my test and the library's test will be collided, which seems too bad. How do people solve this without any library/framework or whatever (without webpack) ?

只在必要的范围内声明test；不要让它全球化。例如，您可以：

<script>

(() => {
  const test = {
    funct1() {
      // ...
    }
    // ...
  };
  // do stuff with test
})();

(() => {
  const test = {
    OTHER_METHOD() {
      // ...
    }
    // ...
  };
  // do stuff with test
})();

</script>

这样，test 都不是全局的；它们都包含在自己的 IIFE 中，所有对特定 test 的使用都将在该 IIFE 中。

some stuff still have to be put on global scope

像 Webpack 这样的模块系统的全部意义在于 避免污染 全局对象；如果您的代码结构合理，则不需要它。但是如果你不得不，只需引用全局对象并分配给它的一个属性，例如：

// someModule.js
window.SomethingGlobal = {
  // stuff
};

这不是 Webpack 特有的； ES6 模块也可以使用同样的方法来减少全球污染

webpack 是如何解决全球污染的？

how does webpack solve global polution?

javascript

namespaces

module

webpack