Webpack 5不能导入UMD模块

Question

我最近升级到Webpack 5，我在导入UMD模块时遇到了一些困难。

特别是，我正试着进口传单。传单似乎导出了由rollup.js创建的UMD模块，如下所示：

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.L = {})));
}(this, (function (exports) { 'use strict';
  [...]
})));

如您所见，它首先尝试使用CommonJS (如果定义了exports和module )，然后尝试使用define (如果定义了define)，否则它试图通过从模块上下文引用this来将自己置于全局范围。

Webpack (没有任何加载器)将其编译为：

(function (global, factory) {
  typeof exports === 'object' && "object" !== 'undefined' ? factory(exports) :
  typeof define === 'function' && __webpack_require__.amdO ? define(['exports'], factory) :
  (factory((global.L = {})));
}(undefined, (function (exports) { 'use strict';
  [...]
})));

具体而言，它所做的是：

• 将typeof module替换为"object"
• 将define.amd替换为__webpack_require__.amd0
• 将this替换为undefined

在建筑过程中，webpack给了我一个警告：export 'default' (imported as 'L') was not found in 'leaflet' (possible exports: )。当我在浏览器中打开编译后的包时，会得到错误的Uncaught TypeError: Cannot set property 'L' of undefined。

结果是CommonJS失败了(因为exports没有定义)，AMD失败了(因为define没有定义)，最后设置全局也失败了，因为this被undefined取代了。

根据Webpack博士的说法，Webpack应该普遍支持进口CommonJS和AMD模块，但在这种情况下，这两种工作似乎都没有。

我能做些什么来解决这个问题？

Answer 1

我缩小了问题的范围，发现问题是由我以某种方式使用imports-loader这一事实造成的。

在更新之前，我使用imports-loader添加了我的依赖项没有导入的任何所需的传递依赖项，特别是CSS文件。配置如下所示：

{ module: { rules: [ {
    test: /\/node_modules\/leaflet\/.*\.js$/,
    loader: "imports-loader?asdf=leaflet/dist/leaflet.css"
} ] } }

升级后，webpack不再接受加载程序的字符串语法，导入加载器也更改了它的语法，因此我将其更改为：

{ module: { rules: [ {
    test: /\/node_modules\/leaflet\/.*\.js$/,
    loader: "imports-loader",
    options: {
        imports: "default leaflet/dist/leaflet.css asdf"
    }
} ] } }

这似乎完成了工作，并适当地包含了必要的CSS文件。然而，当我发现配置的这一部分是造成问题的原因时，我更深入地研究了imports-loader。原来我使用的配置现在正在生成下面的代码行：

import asdf from "leaflet/dist/leaflet.css";

(我可以使用"side-effects leaflet/dist/leaflet.css"获得相同的结果，而不必使用asdf作为伪导入名)。当正确导入CSS文件时，webpack可能会认为这个文件是一个正确的ES模块，从而禁用了对CommonJS/AMD/UMD模块的支持。我将imports-loader的配置更改为：

{ module: { rules: [ {
    test: /\/node_modules\/leaflet\/.*\.js$/,
    loader: "imports-loader",
    options: {
        imports: "pure leaflet/dist/leaflet.css",
        type: "commonjs"
    }
} ] } }

根据文档，这将创建以下代码行：

require("leaflet/dist/leaflet.css");

在做了这个改变之后，它似乎没有问题。

有趣的是，webpack似乎实际上检测到了整个UMD块，而不仅仅是提供了exports和define变量，所以现在它将传单代码编译成这样：

(function (global, factory) {
   true ? factory(exports) :
  0;
}(this, (function (exports) { 'use strict';
   [...]
})));