How to use UMD in browser without any additional dependencies
Suppose I have an UMD module like this (saved in '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');
}
}));
How can I use this module in an HTML file like this? (without requirejs, commonjs, systemjs, etc...)
<!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>
Many thanks in advance for any help.
Answer
Ok, so you are running in an environment without RequireJS, CommonJS, SystemJS, etc.
The key line is factory((global.mymodule = global.mymodule || {})) this does a few things:
If
global.mymoduletruthy, then it is equivalent toglobal.mymodule = global.mymodule // A noop. factory(global.mymodule)Otherwise it is equivalent to:
global.mymodule = {} factory(global.mymodule)
Inside the factory: Your factory you should export what you want to export from your module by assigning to exports. So you'd export myFunction by doing exports.myFunction = myFunction.
Outside the factory: Outside, the exported values will be on mymodule which was exported to the global space. When you want to use myFunction, for instance, you do mymodule.myFunction(...).
In case that's not clear. The factory in your code is the function that starts with function (exports) {, where you've correctly put myFunction.