[英]Webpack 5 cannot import UMD module
我最近升级到 Webpack 5 并且我在导入 UMD 模块时遇到了一些问题。
特别是,我正在尝试导入 Leaflet。Leaflet 似乎导出了由 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
),然后尝试使用 AMD(如果define
了 define),否则它会尝试通过从模块中引用this
来将自己放入全局 scope语境。
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 模块,但在这种情况下,两者似乎都不起作用。
我该怎么做才能解决这个问题?
我缩小了问题范围,发现问题是由我以某种方式使用imports-loader
引起的。
在更新之前,我使用imports-loader
添加我的依赖项未导入的任何所需的传递依赖项,特别是 CSS 文件。 配置看起来像这样:
{ module: { rules: [ {
test: /\/node_modules\/leaflet\/.*\.js$/,
loader: "imports-loader?asdf=leaflet/dist/leaflet.css"
} ] } }
升级后webpack不再接受loader的字符串语法,imports-loader也改了语法,所以我改成:
{ 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
变量,因此它现在将 Leaflet 代码编译成这样:
(function (global, factory) {
true ? factory(exports) :
0;
}(this, (function (exports) { 'use strict';
[...]
})));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.