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.
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.
Simple answer: if you use usual UMD, it should be available in window['mymodule'] (or window.mymodule) or whatever name lib has.
In it's 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>
Here is an example how to render UMD React component:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/react@16.1.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.1/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>
The amd module format is meant to be loaded asynchronously, so you cannot directly reference the file in a script tag. If this is being used for development, then you can use a loader like requirejs (see this link on amd specifics). If what you're after is to use this in production mode, then a few alternatives are:
1) Use requirejs but run the optimisation process which will bundle up the amd file
2) Use another minification process, such as webpack or build it into your frontend tooling (grunt, gulp etc).
I'm afraid in terms of loading the file directly, this isn't possible, due to the nature of amd (ability to declare dependencies on other modules).
Hope this helps.
