javascript - webpack 如何解决全局污染？

Question

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

var test;
(function() {

 test.funct1 = function(){

 }

 test.funct2 = function(){

 }

 test.funct3 = function(){

 }

})

现在，我们减少了问题，因为函数没有放入全局命名空间。我们可以说，它们仍然是，但不完全是。 test将放在全局 namespace它将具有所有其他功能。
问题 1) 现在问题仍然存在，如果有人或某个图书馆有 test ，问题是我的 test和图书馆的 test会被碰撞，这看起来太糟糕了。人们如何在没有任何库/框架或其他任何东西(没有 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 模块提供了同样的减少全局污染的方法