Question

假设我有一个这样的UMD模块（保存在＆＃39; js / mymodule.js＆＃39; ）：

<!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>

如何在这样的HTML文件中使用此模块？（没有requirejs，commonjs，systemjs等......）

headerOptions

非常感谢您的任何帮助。

Answer 1

好的，所以你在没有RequireJS，CommonJS，SystemJS等的环境中运行。

关键是factory((global.mymodule = global.mymodule || {}))，它做了一些事情：

如果global.mymodule真相，则相当于

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

否则相当于：

global.mymodule = {}
factory(global.mymodule)

工厂内部：您的工厂应通过分配到exports导出要从模块导出的内容。因此，您可以通过myFunction导出exports.myFunction = myFunction。

工厂外：在外部，导出的值将显示在导出到全局空间的mymodule上。例如，当您要使用myFunction时，您会mymodule.myFunction(...)。

如果不清楚的话。代码中的工厂是以function (exports) {开头的函数，您正确放置了myFunction。

Answer 2

简单回答：如果您使用通常的UMD，它应该在window.mymodule（或者lib的名称）中可用。

Answer 3

以当前形式，您完全不能使用 myModule.js 中的 myFunction（）。您的myModule.js根本不公开（导出）任何内容。您必须首先将此行添加到myModule.js


exports.myFunction = myFunction;

使您的模块代码变为：


(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;
}));

现在，当您在.html文件中运行此代码时，浏览器将创建一个名为“ mymodule”的全局对象，该对象具有此方法“ myFunction”。

您可以在.html文件中将此方法调用为

myModule.myFunction();

完整的.html文件为：


    <!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>

Answer 4

以下是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>

Answer 5

amd模块格式是异步加载的，因此您无法直接在脚本标记中引用该文件。如果将其用于开发，那么您可以使用像requirejs这样的加载器（请参阅amd细节上的this link）。如果您追求的是在生产模式中使用它，那么有几种选择：

1）使用requirejs但运行优化过程，该过程将捆绑amd文件 2）使用另一个缩小过程，例如webpack或将其构建到您的前端工具（grunt，gulp等）。

我担心直接加载文件，由于amd的性质（能够声明对其他模块的依赖），这是不可能的。

希望这有帮助。

如何在浏览器中使用UMD而不需要任何其他依赖项

5 个答案: