How To Use Umd In Browser Without Any Additional Dependencies

May 30, 2024 Post a Comment

Suppose I have an UMD module like this (saved in 'js/mymodule.js'): (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? facto

Solution 1:

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.

Solution 2:

Simple answer: if you use usual UMD, it should be available in window['mymodule'] (or window.mymodule) or whatever name lib has.

Solution 3:

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) {
  typeofexports === 'object' 
  && typeofmodule !== 'undefined' 
  ? factory(exports) :
    typeof define === 'function' 
    && define.amd 
    ? define(['exports'], factory) :
      (factory(
          (global.mymodule = global.mymodule || {})
        )
      );
}(this, function(exports) {
  'use strict';

  functionmyFunction() {
    console.log('hello world');
  }
  // expose the inner function on the module to use itexports.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><scriptsrc="js/mymodule.js"></script></head><body><script>/* HOW TO USE myFunction from mymodule.js ??? *//* Answer: */
    mymodule.myFunction();
    </script></body></html>

Solution 4:

Here is an example how to render UMD React component:

<!doctype html><htmllang="en"><head><metacharset="utf-8"><scriptsrc="https://unpkg.com/react@16.1.1/umd/react.development.js"></script><scriptsrc="https://unpkg.com/react-dom@16.1.1/umd/react-dom.development.js"></script><scriptsrc="my-component.js"></script><title>React App</title></head><body><divid="root"></div><script>ReactDOM.render(
      React.createElement(MyComponent),
      document.getElementById('root')
    );
  </script></body></html>

Solution 5:

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.

Html5 Code Review