Javascript 网页包装与全球范围污染

我跟在后面。我是这样说的：

import _ from 'lodash';

它如预期的那样工作，但有一些不清楚的地方。指南声称，在这种情况下，lodash不会影响全局范围，但事实似乎并非如此

在此设置中，index.js明确要求lodash存在，并将其绑定为（无全局范围污染）。通过说明模块需要什么依赖关系，webpack可以使用这些信息构建依赖关系图。然后，它使用该图生成一个优化包，在该包中，脚本将以正确的顺序执行

在Chrome的控制台中，我仍然可以访问lodash：

console.log(_, _.join, window._.join);

所有这些工作，所以很明显，洛达斯实际上正在污染全球范围

/*--------------------------------------------------------------------------*/

  // Export lodash.
  var _ = runInContext();

  // Some AMD build optimizers, like r.js, check for condition patterns like:
  if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
    // Expose Lodash on the global object to prevent errors when Lodash is
    // loaded by a script tag in the presence of an AMD loader.
    // See http://requirejs.org/docs/errors.html#mismatch for more details.
    // Use `_.noConflict` to remove Lodash from the global object.
    root._ = _;

    // Define as an anonymous module so, through path mapping, it can be
    // referenced as the "underscore" module.
    define(function() {
      return _;
    });
  }
  // Check for `exports` after `define` in case a build optimizer adds it.
  else if (freeModule) {
    // Export for Node.js.
    (freeModule.exports = _)._ = _;
    // Export for CommonJS support.
    freeExports._ = _;
  }
  else {
    // Export to the global object.
    root._ = _;
  }
}.call(this));

---

这是因为lodash明确地将自己分配给了

窗口

还是其他什么？

查看lodash v4.17.5源代码，很明显，lodash正在将

添加到全局范围

/*--------------------------------------------------------------------------*/

  // Export lodash.
  var _ = runInContext();

  // Some AMD build optimizers, like r.js, check for condition patterns like:
  if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
    // Expose Lodash on the global object to prevent errors when Lodash is
    // loaded by a script tag in the presence of an AMD loader.
    // See http://requirejs.org/docs/errors.html#mismatch for more details.
    // Use `_.noConflict` to remove Lodash from the global object.
    root._ = _;

    // Define as an anonymous module so, through path mapping, it can be
    // referenced as the "underscore" module.
    define(function() {
      return _;
    });
  }
  // Check for `exports` after `define` in case a build optimizer adds it.
  else if (freeModule) {
    // Export for Node.js.
    (freeModule.exports = _)._ = _;
    // Export for CommonJS support.
    freeExports._ = _;
  }
  else {
    // Export to the global object.
    root._ = _;
  }
}.call(this));

---

也就是说，您似乎可以使用

.noConflict（）

从全局范围中删除

\u

。

或者您将其分配给了窗口，或者是lodash分配给了窗口。这可能取决于您如何捆绑代码。我不知道lodash的内部结构，但是如果它能够识别模块加载机制，很多库都会尝试避免附加到全局作用域。如果做不到，它将把自己纳入全球范围。我认为洛达斯做到了这一点。例如，如果我从“Lodash”导入Lodash，

，

Lodash

不在全局范围内，而

\uuU

仍在全局范围内。我不知道他们为什么用这么不幸的例子。我同意。我也被同样的原因弄糊涂了谢谢！我当时的直觉是正确的。我刚接触Webpack，我喜欢导入/导出的想法。我只是很惊讶他们用lodash作为新来者的例子，这太令人困惑了！

/*--------------------------------------------------------------------------*/

  // Export lodash.
  var _ = runInContext();

  // Some AMD build optimizers, like r.js, check for condition patterns like:
  if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
    // Expose Lodash on the global object to prevent errors when Lodash is
    // loaded by a script tag in the presence of an AMD loader.
    // See http://requirejs.org/docs/errors.html#mismatch for more details.
    // Use `_.noConflict` to remove Lodash from the global object.
    root._ = _;

    // Define as an anonymous module so, through path mapping, it can be
    // referenced as the "underscore" module.
    define(function() {
      return _;
    });
  }
  // Check for `exports` after `define` in case a build optimizer adds it.
  else if (freeModule) {
    // Export for Node.js.
    (freeModule.exports = _)._ = _;
    // Export for CommonJS support.
    freeExports._ = _;
  }
  else {
    // Export to the global object.
    root._ = _;
  }
}.call(this));