Webpack 4 通用库目标答案

【问题标题】：Webpack 4 universal library targetWebpack 4 通用库目标
【发布时间】：2018-08-13 03:29:06
【问题描述】：

根据Webpack 4 documentation，如果我指定 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()

这（显然）在节点环境中导入时会导致运行时错误window is undefined。

要明确：
我知道 window 在节点应用程序中不存在。我的问题不是关于这个，而是关于 webpack。

这是一个错误还是我错过了什么？

我的输出配置：

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

【问题讨论】：

你设置了什么目标：webpack.js.org/concepts/targets
默认值。但这没关系。 libraryTarget: 'umd' 应该生成通用代码（在浏览器和节点中都可以使用）。这是根据他们的文档：“libraryTarget：“umd” - 这会将您的库暴露在所有模块定义下，允许它与 CommonJS、AMD 和作为全局变量一起使用。”此外，我使用 Webpack 3 构建了完全相同的代码，它生成了一个合适的包。底线 - 正如我在回答中所说，这是 Webpack 4 中的一个错误。

标签： javascript webpack bundler umd webpack-4

【解决方案1】：

根据docs将output.globalObject包含到webpack.config.js中：

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

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

【讨论】：

【解决方案2】：

这将是 Webpack 4 中的 bug。
Webpack 3 会生成正确的包。

应该使用this 功能修复此问题，直到它完成建议的解决方法是使用globalObject：

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

【讨论】：