Javascript 网页包5无法导入UMD模块

我最近升级到Webpack 5，导入UMD模块时遇到一些问题

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

（功能（全局，工厂）{
导出类型==“对象”&&typeof模块！==“未定义”？工厂（导出）：
typeof define=='function'&&define.amd？define（['exports']，工厂）：
（工厂（（global.L={}））；
}（此功能（导出）{‘严格使用’；
[...]
})));

如您所见，它首先尝试使用CommonJS（如果定义了

导出

和

模块

），然后尝试使用AMD（如果定义了

定义

），否则它尝试通过从模块上下文引用

此

，将自身置于全局范围

Webpack（无任何加载程序）将其编译为：

（功能（全局，工厂）{
导出类型==='object'&&“object”！=='undefined'？工厂（导出）：
typeof define=='function'&&&uuuu网页包需要.amdO？define（['exports'，factory）：
（工厂（（global.L={}））；
}（未定义，（函数（导出）{‘严格使用’；
[...]
})));

具体来说，它所做的是：

• 将模块的类型替换为对象
• 将

  define.amd

  替换为

  \uuuu网页\uuuuuu.amd0

• 将

  此

  替换为

  未定义

在生成过程中，webpack给了我一个警告：

在“传单”（可能的导出：）中找不到导出“默认”（导入为“L”）

。在浏览器中打开已编译的捆绑包时，会出现错误

uncaughttypeerror:cannotsetproperty'L'of undefined

发生的情况是CommonJS失败（因为

导出

未定义），AMD失败（因为

定义

未定义），最后设置全局也失败，因为

此

被替换为

未定义

据介绍，Webpack应该普遍支持导入CommonJS和AMD模块，但在这种情况下，这两个模块似乎都不起作用

---

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

我缩小了问题的范围，发现问题是由我以某种方式使用

导入加载程序造成的

在更新之前，我使用
imports加载程序
添加依赖项未导入的任何需要的可传递依赖项，特别是CSS文件。配置如下所示：

{模块：{规则：[{
测试：/\/node\u模块\/传单\/.\.js$/,，
加载器：“导入加载器？asdf=传单/dist/传单.css”
} ] } }

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

{模块：{规则：[{
测试：/\/node\u模块\/传单\/.\.js$/,，
加载器：“导入加载器”，
选项：{
导入：“默认传单/dist/传单.css asdf”
}
} ] } }

这似乎完成了任务，并正确地包含了必要的CSS文件。然而，当我发现配置的这一部分是问题的原因时，我深入研究了这个问题。原来我使用的配置现在生成了以下代码行：

从“传单/目录/传单.css”导入asdf；

（我本可以使用
“side-effects-palic/dist/palicate.css”
来获得相同的结果，而不必使用
asdf
作为虚假的导入名称）。虽然这正确地导入了CSS文件，但它可能导致webpack认为该文件是正确的ES模块，从而禁用了对CommonJS/AMD/UMD模块的支持。我将导入加载程序的配置更改为以下内容：

{模块：{规则：[{
测试：/\/node\u模块\/传单\/.\.js$/,，
加载器：“导入加载器”，
选项：{
导入：“纯传单/dist/传单.css”，
类型：“commonjs”
}
} ] } }

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

require（“传单/目录/传单.css”）；

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

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

（功能（全局，工厂）{
是吗？工厂（出口）：
0;
}（此功能（导出）{‘严格使用’；
[...]
})));