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.

回答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.

回答2:

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

回答3:

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>

回答4:

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.

来源：https://stackoverflow.com/questions/38638210/how-to-use-umd-in-browser-without-any-additional-dependencies

标签

javascript

html

requirejs

systemjs

commonjs