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

Question

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

Dor*_*val 17 html javascript commonjs requirejs systemjs

假设我有一个这样的UMD模块(保存在'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');
    }
}));

Run Code Online (Sandbox Code Playgroud)

如何在这样的HTML文件中使用此模块？(没有requirejs,commonjs,systemjs等......)

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

Run Code Online (Sandbox Code Playgroud)

非常感谢您的帮助.

Answer 1

Lou*_*uis 16

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

关键是factory((global.mymodule = global.mymodule || {}))这做了几件事:

如果global.mymodule真的,那就相当于
```
global.mymodule = global.mymodule // A noop.
factory(global.mymodule)
```
Run Code Online (Sandbox Code Playgroud)
否则它相当于:
```
global.mymodule = {}
factory(global.mymodule)
```
Run Code Online (Sandbox Code Playgroud)

工厂内部:您的工厂应该通过分配来导出要从模块导出的内容exports.所以你myFunction要做出口exports.myFunction = myFunction.

工厂外:在外部,出口值将mymodule输出到全球空间.myFunction例如,当您想要使用时mymodule.myFunction(...).

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

这是最好的答案,并提供了许多隐藏和隐藏的信息.每个人似乎都希望您使用RequireJS,SystemJS,Webpack等. (3认同)
我不熟悉 UMD 或任何“工厂”（“工厂内部”和“工厂外部”是什么意思？） - 我不确定如何实现这个答案。我需要什么代码（可以复制+粘贴的代码，或者可以用作起点的代码）？我需要自己重新实现 `function require( moduleName )` 吗？ (3认同)

Answer 2

Vla*_*kov 7

简单的答案:如果你使用通常的UMD,它应该是可用的window.mymodule(或lib的任何名称).

@Dai也许吧。你可以做什么，打开你的模块代码，用“漂亮的打印”格式化它，然后查找文件的开头或结尾，可能有“exports”，“global”等。可能你的lib用其他名称导出或在 `commonJsStrict` 对象内或其他地方。 (2认同)
如果您不确定模块的命名方式，那么您可能需要打开 DevTools 并检查“window”对象。在 DevTools 中输入“window.”时，自动补全功能应显示全局范围内的名称。这些名称之一应该是您的模块。 (2认同)

Answer 3

Pra*_*aym 7

在目前的形式，不能使用myFunction的（）从myModule.js的。您的 myModule.js 根本没有公开（导出）任何内容。您必须首先将此行添加到 myModule.js


exports.myFunction = myFunction;

Run Code Online (Sandbox Code Playgroud)

这样你的模块代码就变成了：


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

Run Code Online (Sandbox Code Playgroud)

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

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

myModule.myFunction();

Run Code Online (Sandbox Code Playgroud)

完整的 .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>

Run Code Online (Sandbox Code Playgroud)

Answer 4

小智 -4

amd 模块格式旨在异步加载，因此您不能直接在脚本标记中引用该文件。如果这是用于开发，那么您可以使用像 requirejs 这样的加载器（请参阅有关 amd 详细信息的链接）。如果您想要在生产模式下使用它，那么有一些替代方案：

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

恐怕就直接加载文件而言，由于 amd 的性质（声明对其他模块的依赖关系的能力），这是不可能的。

希望这可以帮助。

我担心你把 UMD 和 AMD 搞混了。 (6认同)

归档时间：	9 年，7 月前
查看次数：	7979 次
最近记录：	7 年，9 月前