1

在一个简单的 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 片段。欢迎任何建议。

4

1 回答 1

3

最后，我在 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 {
		...
	}
}))

幸运的是，我是该库的所有者并且可以修复它。

于 2017-08-29T01:47:26.007 回答