How to use UMD in browser without any additional d

2020-06-30 07:54发布

站内问答 / JavaScript
1405 5 6

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.

5条回答
霸刀☆藐视天下
2楼-- · 2020-06-30 08:01

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>
查看更多
0人赞 添加讨论(0) 举报
We Are One
3楼-- · 2020-06-30 08:11

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>

查看更多
0人赞 添加讨论(0) 举报
Bombasti
4楼-- · 2020-06-30 08:13

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.

查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
5楼-- · 2020-06-30 08:15

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

查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
6楼-- · 2020-06-30 08:17

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:

  1. If global.mymodule truthy, then it is equivalent to 

    global.mymodule = global.mymodule // A noop.
factory(global.mymodule)

  2. 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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)