Menu
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.
316
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.mymodule truthy, then it is equivalent to
global.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.
179
Simple answer: if you use usual UMD, it should be available in window['mymodule'] (or window.mymodule) or whatever name lib has.
19
In its current form, you cannot use myFunction() from myModule.js at all. Your myModule.js is not exposing (exporting) anything at all. You will have to first add this line to myModule.js
exports.myFunction = myFunction;
So that your module code becomes:
(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;
}));
Now when you will run this code in your .html file, browser creates a global object called 'mymodule' that has this method 'myFunction'.
You can call this method in your .html file as
myModule.myFunction();
Complete .html file will be:
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
