包装器允许模块与AMD/CommonJ或脚本标记一起工作？

Question

我只是尝试包装我们的一个模块，这是打算通过一个<script>标签在一些样板，以允许可选的加载与需求。

这很痛苦，我想出的最好办法是：

(function(){
var exports, jQuery;
if (typeof window.define === 'function' && typeof window.requirejs === 'function') {
    exports     = {};
    define(['jquery'], function (jq) {
        jQuery = jq;
        return thisModule();
    });
} else {
    exports     = window;
    jQuery      = window.jQuery;
    thisModule();
}


function thisModule() {
}

})();

注意这是

• 许多样板
• 要求您在变量中声明依赖项(谢天谢地只有jQuery )和amd。
• 如果我想得到CommonJ的支持，还需要更多的代码。

我主要关注的是第二点，因为当我超越包装我们的核心文件时，这一点将是一个令人厌烦的问题。我确信有一些整洁的(呃)包装器实现，但我找不到。

有人有什么建议吗？

Answer 1

在您试图重新创建已经存在的东西时，我做了完全相同的事情，在my StackOverflow question中提出了一个稍微不同的解决方案。

长话短说，您需要知道的名称是“通用模块定义”()，GitHub位于https://github.com/umdjs/umd，有各种不同的实现。

Answer 2

您是试图为内部模块或外部模块执行此操作吗？

如果您不需要在其他模块中使用，那么是否有可能在假设AMD的情况下构建您的模块，然后如果您的代码中没有定义()函数，那么就移除它吗？当然，你必须使用命名模块，但无论如何你必须这样做.

如果您的模块都返回它们从define()函数导出的信息，则比较简单，并且您的shimmed定义函数看起来可能如下所示：

//Whatever additional guards you want could be added, of course...
if (typeof(window.define) === undefined){
  window.define = function(name, deps, callback){
    window.myNamespace[name] = callback();
  };
}

至少这样你就不用把样板添加到每个模块了..。

如果你有一个更大的库，里面有很多相互依赖的子模块，那么你可能只需要一直使用Require，或者不使用，然后在整个库周围使用包装代码来处理AMD支持，Jquery和Knockout JS就是这样做的。

Answer 3

对此进行黑客攻击之后，我成功地想出了以下内容，这似乎要好得多，甚至可以作为一个shim包含在一个常规脚本标记中：

一些笔记和缺点。

• 必须将窗口对象上的任何显式设置替换为导出对象。
• 它假设任何依赖项都以类似名称的属性形式存在于窗口对象上(尽管它也确保将该属性放置在那里)。在我的情况下，这通常是足够安全的，但是您可以很容易地黑进类似于requirejs路径配置的东西。
• 实际上，我并不认为整个出口概念是特别必要的，或者至少不是在所有情况下都是必要的。

(function () {
    var define, exports = {};
    if (window.define && window.define.amd) {
        define = window.define;
    } else {
        exports = window;
        define = function (name, dependencies, fn) {
            var deps = [];
            for (var i = 0; i < dependencies.length; i++)
                deps.push(window[dependencies[i]]);
            var module = fn.apply(undefined, deps);
            if (!window[name]) window[name] = module;
        };
    }

    define('mylib.interaction', ['jQuery', 'mylib.core', 'jQuery.UI'], function($, mylib) {
        return /*....blah...*/;
    })
})()