webpack 如何解决全球污染? [英] how does webpack solve global polution?

问题描述

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

Let's say I have 3 functions. If I write them all one by one, below each other, all of them will be exposed to the global namespace hence global polution. So one way seems to be the following.

var test;
(function() {

 test.funct1 = function(){

 }

 test.funct2 = function(){

 }

 test.funct3 = function(){

 }

})

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

Now, we reduced the problem since the functions are not put into the global namespace. We could say, they still are, but not completely. test will be put on the global namespace which would have all other functions on it.

问题 1) 现在，问题仍然存在，如果某人或某个库有 test ，则问题是我的 test 和库的 test 会被碰撞，这看起来太糟糕了.人们如何在没有任何库/框架或其他任何东西(没有 webpack)的情况下解决这个问题?

Question 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) ?

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

Question 2) Okay, so webpack does solve the above problem. In webpack, each file is the module. That's understandable, but still, a good nice example would be great, some stuff still have to be put on global scope. I'd appreciate a good nice example.

推荐答案

现在问题依然存在，如果有人或者某个库有 test ，问题是我的 test 和库的 test 会发生冲突，这看起来太糟糕了.人们如何在没有任何库/框架或其他任何东西(没有 webpack)的情况下解决这个问题?

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；不要让它成为全球性的.例如，您可以:

Declare the test only inside the scope where it's necessary; don't make it global. For example, you could have:

<script>

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

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

</script>

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

This way, neither test is global; they're both enclosed in their own IIFE, and all uses of a particular test will be inside that IIFE.

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

some stuff still have to be put on global scope

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

The whole point of a module system like Webpack is to avoid having to pollute the global object; if your code is structured reasonably, there shouldn't be any need for it. But if you had to, just refer to the global object and assign to one of its properties, eg:

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

这不是 Webpack 特有的；ES6 模块提供了同样的减少全球污染的方法

This isn't particular to Webpack; this same exact approach for reducing global pollution is available ES6 modules

这篇关于webpack 如何解决全球污染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！