Webpack 和全局范围污染

Question

我正在关注Webpack guide。我像这样导入lodash：

import _ from 'lodash';

它按预期工作，但有一些不清楚的地方。 Guide 声称在这种情况下，全局范围不会受到 lodash 的影响，但事实并非如此。

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

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

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

所有这些工作，所以很明显 lodash 实际上污染了全局范围。

是因为 lodash 确实明确地将自己分配给 window 还是其他原因？

Answer 1

查看 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() 从全局范围中删除_。