在一个简单的webpack 2项目中,我正在尝试使用以下UMD模块:https://github.com/Offirmo/simple-querystring-parser/blob/master/index.js
没有翻译错误。
但是,最终在浏览器中出现此错误:Uncaught TypeError: Cannot set property 'SimpleQuerystringParser' of undefined
似乎Webpack包装提供了UMD代码段无法识别的环境。
我在webpack文档中找不到任何提示
在Google中搜索“使用Webpack消耗UMD”并没有得出有趣的结果
StackOverflow也没有帮助。
那么如何在Webpack中使用UMD库呢?
注意:是的,目标UMD库是我的,但是它使用UMD官方网站上的合法UMD代码段。欢迎任何建议。
最佳答案
最后,我在webpack 2环境下调试了UMD包装器,并提出了一个改进的UMD包装器,该包装器也可以在webpack 2中使用:(要点在https://gist.github.com/Offirmo/ec5c7ec9c44377c202f9f8abcacf1061#file-umd-js中)
// Iterating on the UMD template from here:
// https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
// But experimentally improving it so that it works for webpack 2
// UMD template from https://gist.github.com/Offirmo/ec5c7ec9c44377c202f9f8abcacf1061#file-umd-js
(function (root, factory) {
var LIB_NAME = 'Foo'
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(function () {
return (root
? root[LIB_NAME] = factory()
: factory() // root is not defined in webpack 2, but this works
)
});
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory()
} else if (root) {
// Browser globals
root[LIB_NAME] = factory()
} else {
throw new Error('From UMD wrapper of lib "' + LIB_NAME + '": unexpected env, cannot expose my content!')
}
}(this, function () {
"use strict";
return {
...
}
}))
有关信息,请参见原始包装器,该包装器不适用于webpack 2 :(从此处https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js)
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(function () {
return (root.returnExportsGlobal = factory());
});
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals
root.returnExportsGlobal = factory();
}
}(this, function () {
"use strict";
return {
...
}
}))
幸运的是,我是该库的所有者,可以修复它。
关于javascript - 如何在Webpack中使用UMD模块?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45929231/