使用 RequireJS 的网站上的 UMD 不起作用？答案

【问题标题】：UMD on sites using RequireJS not working?使用 RequireJS 的网站上的 UMD 不起作用？
【发布时间】：2019-05-31 15:58:08
【问题描述】：

当我去绝大多数网站时，打开控制台并粘贴以下代码：

(function(global, appName, app) {
    if (typeof define === "function" && typeof define.amd === "object") {
        console.log("AMD/RequireJS");
        define(app);
        console.log("defined app");
    } else if (typeof module !== "undefined") {
        console.log("CommonJS");
        module.exports = app(global);
        console.log("defined with module.exports");
    } else {
        console.log("Browser");
        global[appName] = app(global);
        console.log("defined as global");
    }
})(this, "App", function(global) {
    "use strict";
    console.log("defining getThis");
    function getThis() {
        console.log('i got it!');
    }
    return {
        getThis: getThis
    };
});
console.log("finished IIFE");
App.getThis();

我得到以下输出：

Browser
defining getThis
defined as global
finished IIFE
i got it!

如果我将相同的代码粘贴到使用 RequireJS 的站点的控制台中，例如 www.bestbuy.com 或 www.homedepot.com，它会失败并显示以下输出：

AMD/RequireJS
defined app
finished IIFE
Uncaught ReferenceError: App is not defined at <anonymous>:27:1

我尝试将define(app); 更改为define(['App'], app);，但没有任何效果。

我已经在谷歌上搜索了好几个小时了，我已经无计可施了。我认为 UMD 模式是通用的因此它的名字。什么给了？

【问题讨论】：

标签： javascript requirejs umd

【解决方案1】：

嗯，这完全取决于您将如何使用您的脚本。如果您知道您将在没有RequireJS 的浏览器中使用您的脚本，那么您测试它的方式就可以了。

App.getThis();

因为它在全局对象中，对于浏览器来说，window。

但如果您知道RequireJS 存在，那么您需要require 您的应用程序。

require(["App"], function(App){
    App.getThis();
});

如果NodeJS

const App = require('App');

但我没有测试过这个。

另外，我建议您将define(app); 更改为define(appName, app);

希望对你有帮助

【讨论】：