webpack 如何解决全球污染？

Question

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

var test;
(function() {

 test.funct1 = function(){

 }

 test.funct2 = function(){

 }

 test.funct3 = function(){

 }

})

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

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

问题 2) 好的，所以 webpack 确实解决了上述问题。在 webpack 中，每个文件都是模块。这是可以理解的，但是，一个很好的例子会很棒，有些东西仍然必须放在全局范围内。我会很感激一个很好的例子。

Answer 1

现在问题依然存在，如果有人或某个库有 test ，问题是我的测试和库的测试会碰撞，这看起来太糟糕了。人们如何在没有任何库/框架或其他任何东西（没有 webpack）的情况下解决这个问题？

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

<script>

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

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

</script>

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

有些东西仍然需要放在全局范围内

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

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

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