在一个简单的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/

10-11 12:15