Webpack 4通用库目标

Question

根据Webpack 4的文档，如果我指定libraryTarget: 'umd'，则应产生以下输出：

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports["MyLibrary"] = factory();
  else
    root["MyLibrary"] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

然而，我得到的是：

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define("lib", [], factory);
    else if(typeof exports === 'object')
        exports["lib"] = factory();
    else
        root["lib"] = factory();
})(window, function() {
return

更精确地说，与其是这样：
(typeof self !== 'undefined' ? self : this, function()
我得到了这个：
(window, function()

这（显然）会在 node 环境中导入时引发“window 未定义”的运行时错误。

明确一点：
我知道在 node 应用程序中不存在 window。我的问题不在于此，而在于 webpack。

这是一个 bug 还是我漏掉了什么？

我的输出配置：

output: {
    path: resolve(__dirname, 'umd'),
    filename: 'lib.js',
    libraryTarget: 'umd',
    library: 'lib',
    umdNamedDefine: true,
},

- JeB

---

你设置了什么目标：https://webpack.js.org/concepts/targets/ - Jason Aller

默认设置。但这并不重要。libraryTarget: 'umd'应该会生成通用代码（适用于浏览器和Node）。这是根据他们的文档：“libraryTarget:” umd “-这将在所有模块定义下公开您的库，使其能够与CommonJS，AMD和全局变量一起使用。”另外，我使用Webpack 3构建了完全相同的代码，并生成了正确的捆绑包。最重要的是 - 这是 Webpack 4中的一个错误，正如我在答案中所述。 - JeB

Answer 1

这将是Webpack 4中的一个错误。
Webpack 3会生成一个正确的捆绑包。

这个问题应该会在此功能修复，直到修复完成，建议使用globalObject的解决方法：

output: {
    path: resolve(__dirname, 'umd'),
    filename: 'lib.js',
    libraryTarget: 'umd',
    library: 'lib',
    umdNamedDefine: true,
    globalObject: `(typeof self !== 'undefined' ? self : this)`
},

- JeB

Answer 2

根据文档，在webpack.config.js文件中包含output.globalObject：

module.exports = {
  output: {
    libraryTarget: 'umd',
    globalObject: 'this'
  }
}

要使UMD构建在浏览器和Node.js上都可用，请将output.globalObject选项设置为'this'。

- v.babak