我最近升级到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
被定义),否则它试图通过引用把自己在全球范围内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模块,但是在这种情况下,两者似乎都不起作用。
我该怎么做才能解决此问题?
我将问题缩小了范围,发现问题是由我imports-loader
以某种方式使用an引起的。
在更新之前,我使用imports-loader
来添加我的依赖项未导入的所有需要的传递性依赖项,特别是CSS文件。配置看起来像这样:
{ module: { rules: [ {
test: /\/node_modules\/leaflet\/.*\.js$/,
loader: "imports-loader?asdf=leaflet/dist/leaflet.css"
} ] } }
升级后,webpack不再接受加载程序的字符串语法,而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';
[...]
})));
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句