我开发了一个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 如果我手动编辑这个文件,以便条件[2]永远不会执行,只有每次执行条件[3],那么一切正常.当然,我不想这样做,因为它需要我编辑一个外部库,我宁愿保持原始状态,所以我可以稍后升级它.
我觉得可能有办法让这项工作,我只是不明白RequireJS是如何工作的.显然,KnockoutJS正在尝试与RequireJS一起玩,但在我的情况下,它失败了.对我来说,在这种情况下,即使存在RequireJS,我也不需要KnockoutJS来使用它.
如何让这两个库并排工作？
编辑
我无法控制何时加载库以及主机站点已加载的所有其他库.事实上,大部分时间我的插件都会被包含在内,它将由没有网络开发经验的人使用像wordpress,Webs.com或Weebly这样糟糕的WYSIWYG平台,所以有时我的脚本标签可能会让它成为头顶元素,其他时候它可能包含在某个地方的body元素中.
另外,要清楚,我的库不使用RequireJS.碰巧我们的一个客户试图使用我的库DOES使用RequireJS,当我的库被包含时,KnockoutJS(与我的库捆绑,但尚未在主机站点上)引发异常,因为它认为它需要用RequireJS注册自己(或者至少是我对异常的推测).
虽然原则上我不反对加载我的代码依赖于需求的库,但事实是它会为我的用户创建一个缓慢,糟糕的体验,因为它将需要额外的请求/响应周期来加载它们.
所以让我们说你的插件看起来像这样：
(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文件作为单独的标记加载.需要将处理加载.服务器当然还必须能够提供“knockout-3.0.0.js”网址.这是需要工作的方式.它会将您传递的任何URL作为数组参数require中的元素加载,并将它们作为参数返回的内容传递给函数.
如果需要将插件文件和ko文件缩小/捆绑到单个文件中,可以使用reuquirejs minifier / optimizer(http://requirejs.org/docs/optimization.html).它将导航依赖树并仅输出一个包含所有模块的js文件.这里有一个怪癖：你需要删除.min扩展器才能工作,阅读更多关于文档的内容,我刚才提到它可以省去一些麻烦.
此外,有关如何使用ko with 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,minified line
})()
或者,如果您不希望ko可用于整个页面,您可能还希望在上面的步骤中重新分配窗口.
(function(){
var define = null; //so define will no longer be a function,minified line
//plugin code here;
})()
