假设我有一个像这样的UMD模块（保存在'js/mymodule.js'中）：
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.mymodule = global.mymodule || {})));
}(this, function (exports) { 'use strict';
function myFunction() {
console.log('hello world');
}
}));
如何在这样的 HTML 文件中使用此模块？ （没有 requirejs、commonjs、systemjs 等...）
<!doctype html>
<html>
<head>
<title>Using MyModule</title>
<script src="js/mymodule.js"></script>
</head>
<body>
<script>
/* HOW TO USE myFunction from mymodule.js ??? */
</script>
</body>
</html>
提前非常感谢您的帮助。
好吧，所以你运行在一个没有 RequireJS、CommonJS、SystemJS 等的环境中
关键是
factory((global.mymodule = global.mymodule || {}))如果
global.mymoduleglobal.mymodule = global.mymodule // A noop.
factory(global.mymodule)
否则相当于：
global.mymodule = {}
factory(global.mymodule)
工厂内部：您的工厂应该通过分配给
exportsmyFunctionexports.myFunction = myFunction工厂外：在工厂外，导出的值将位于导出到全局空间的
mymodulemyFunctionmymodule.myFunction(...)如果还不清楚。代码中的工厂是以
function (exports) {myFunction简单的答案：如果您使用常用的 UMD，它应该以
window['mymodule']window.mymodulewindow在当前形式中，您根本无法使用 myModule.js 中的 myFunction()。 您的 myModule.js 根本没有公开（导出）任何内容。您必须首先将此行添加到 myModule.js
exports.myFunction = myFunction;
这样你的模块代码就变成：
(function(global, factory) {
typeof exports === 'object'
&& typeof module !== 'undefined'
? factory(exports) :
typeof define === 'function'
&& define.amd
? define(['exports'], factory) :
(factory(
(global.mymodule = global.mymodule || {})
)
);
}(this, function(exports) {
'use strict';
function myFunction() {
console.log('hello world');
}
// expose the inner function on the module to use it
exports.myFunction = myFunction;
}));
现在，当您在 .html 文件中运行此代码时，浏览器会创建一个名为“mymodule”的全局对象，该对象具有此方法“myFunction”。
您可以在 .html 文件中将此方法调用为
myModule.myFunction();
完整的 .html 文件将是：
<!doctype html>
<html>
<head>
<title>Using MyModule</title>
<script src="js/mymodule.js"></script>
</head>
<body>
<script>
/* HOW TO USE myFunction from mymodule.js ??? */
/* Answer: */
mymodule.myFunction();
</script>
</body>
</html>
这是一个如何渲染 UMD React 组件的示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="my-component.js"></script>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('root')
);
</script>
</body>
</html>amd 模块格式旨在异步加载，因此您无法直接在脚本标记中引用该文件。如果这是用于开发，那么您可以使用像 requirejs 这样的加载器（请参阅此链接了解 amd 细节）。如果您想要在生产模式中使用它，那么有一些替代方案：
1）使用 requirejs 但运行优化过程，该过程将捆绑 amd 文件 2) 使用另一个缩小过程，例如 webpack 或将其构建到您的前端工具（grunt、gulp 等）中。
恐怕就直接加载文件而言，这是不可能的，因为 amd 的性质（声明对其他模块的依赖关系的能力）。
希望这有帮助。