javascript - 当主机站点使用 RequireJS 时，将 KnockoutJS 作为第三方包的一部分加载时出错

Question

我开发了一个 JavaScript 插件，将包含在我们客户的网站上。我创建的插件依赖于一些外部库，这些库被捆绑并作为一个大包交付给客户端:jQuery 1.8.2 和 KnockoutJS v3.0.0。

该插件在大多数站点上运行良好，但如果主机站点使用 RequireJS，我的包将无法加载，因为 KnockoutJS 会自动检测到 RequireJS 存在并尝试使用它。这是抛出的错误:

Mismatched anonymous define() module

显然，我在 RequireJS 站点上找到了错误消息的“解释”。不幸的是，我不知道如何避免它。在我的 KnockoutJS 库的本地副本中，我发现了有问题的行:

(function(factory) {
    // Support three module loading scenarios
    if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
        // [1] CommonJS/Node.js
        var target = module['exports'] || exports; // module.exports is for Node.js
        factory(target);
    } else if (typeof define === 'function' && define['amd']) {
        // [2] AMD anonymous module
        define(['exports'], factory);
    } else {
        // [3] No module loader (plain <script> tag) - put directly in global namespace
        factory(window['ko'] = {});
    }
}

如果我手动编辑此文件，使条件 [2] 永远不会执行，而只有条件 [3] 每次都执行，那么一切正常。当然，我不想这样做，因为它需要我编辑一个外部库，我希望它保持原始状态，以便以后升级。

我觉得可能有一种方法可以使它工作，我只是不明白 RequireJS 是如何工作的。显然，KnockoutJS 正试图与 RequireJS 配合得很好，但在我的例子中，它失败了。对我来说，在这种情况下，即使存在 RequireJS，我也不需要 KnockoutJS 来使用它。

我怎样才能让这两个库并行工作？

编辑

我无法控制何时加载我的库以及主机站点已加载的所有其他库。事实上，大多数时候我的插件会被包括在内，它是由没有网络开发经验的人使用糟糕的所见即所得平台(如 WordPress、Webs.com 或 Weebly)制作的，所以有时我的脚本标签可能会出现在头顶元素，其他时候它可能包含在某个地方的 body 元素中。

此外，需要说明的是，我的库不使用 RequireJS。碰巧我们的一位客户正在尝试使用我的库确实使用了 RequireJS，当我的库被包含时，KnockoutJS(与我的库捆绑在一起，但还没有在主机站点上)抛出一个异常，因为它认为它需要用 RequireJS 注册自己(或者至少这是我对异常的猜测)。

虽然原则上我不反对加载我的代码依赖于需求的库，但事实是它会给我的用户带来缓慢、糟糕的体验，因为它需要额外的请求/响应周期来加载他们。

Answer 1

嗯，最简单的方法可能是在 requirejs 之前加载 knockout。 ko 将不再检测到 require 存在，并将与选项 [3] 一起使用。如果您不能这样做，另一种选择是在需求层次结构中添加您的插件和 ko 文件。

假设您的插件看起来像这样:

(function(ko){

//stuff
ko.applyBindings({});

})(ko) 

您需要将其更改为:

require([
    "knockout-3.0.0.js" // this should be the url you use for knockout
    ], function(ko){
       //stuff
       ko.applyBindings({});
})

并且不要将 knockout.js 文件作为单独的标签加载。 Require 将处理加载。当然，服务器必须仍然能够提供“knockout-3.0.0.js”url。这就是 require 的工作原理。它加载您作为 require 的数组参数中的元素传递的任何 url，并将它们作为参数返回的内容传递给函数。

如果您需要将插件文件和 ko 文件缩小/捆绑到一个文件中，您可以使用 reuquirejs 缩小器/优化器 ( http://requirejs.org/docs/optimization.html )。它将导航依赖树并只输出一个包含所有模块的 js 文件。这里有一个怪癖:您需要删除 .js 扩展名才能使缩小器工作，阅读更多关于它的文档，我只是提到它是为了避免一些麻烦。

此外，可以在此处找到有关如何将 ko 与 require 一起使用的更多文档:http://knockoutjs.com/documentation/amd-loading.html

编辑，操作编辑后:

好的，所以在这种情况下，您应该创建一个单独的范围，您可以在其中做您想做的事。您需要复制文件中的 ko 代码，但像这样您至少会得到一个文件。

所以，首先创建一个作用域:

(function(){

})()

然后复制里面的ko代码:

(function(){

//ko code here, should be a single, minified line

})()

然后你需要欺骗 ko 使用选项 3，所以这样做:

(function(){

var define = null; //so define will no longer be a function, don't forget the var
var require = null;
//ko code here, should be a single, minified line

})()

如果您不希望 ko 对整个页面可用，您可能还想在上述步骤中重新分配窗口。

现在添加您的插件代码:

(function(){

var define = null; //so define will no longer be a function, don't forget the var
var require = null;
//ko code here, should be a single, minified line

//plugin code here;

})()