添加在已经将jquery作为全局的页面上使用jquery的RequireJS模块 [英] Adding RequireJS module that uses jquery on a page that already has jquery as a global
问题描述
我有一个应用程序的附加组件(称为appX),允许用户使用javascript,css和appX的webservices api创建自己的自定义。
I have an add-on to an application (call it appX) that allows users to create their own customizations using javascript, css and appX's webservices api.
通常自定义很小,并且不涉及很多外部库/插件,但是当它们有外部库时,典型用户选择的库是jQuery。
Usually customizations are small and do not involve a lot of external libraries/plugins but when they do have external libs the typical users' library of choice is jQuery.
在appX的下一个版本中,他们本身使用的是jQuery,我知道这将打破一些自定义。
In the next version of appX they are using jQuery natively which I know is going to break some of the customizations.
所以我需要模块化这种情况。我还有其他一些问题,而RequireJS似乎是解决这些问题的好方法。 我只需要弄清楚如何在这种情况下正确应用RequireJS
So I have a need to modularize this situation. I have some other problems that are coming up and RequireJS seems like a good solution to these issues. I just need to figure out how to apply RequireJS properly for this situation
在我的POC中,我按如下方式加载require.js:
In my POC I'm loading require.js as follows:
<!--A bunch of other script including jQuery (but not require) are loaded already -->
<script type="text/javascript" src="/custom/js/require.js"></script>
<script type="text/javascript" src="/custom/js/dostuff.js"></script>
我们将调用jQuery加载的appX jqueryx
和我要加载的那个 jqueryp
(私有的p)
We'll call the jQuery loaded with appX jqueryx
and the one I want to load jqueryp
(p for private)
jQuery使用AMD并默认使用内部定义:
jQuery utilizes AMD and by default uses this definition internally:
define( "jquery", [], function () { return jQuery; } );
但是在这种情况下,在JQuery(jqueryx)之后加载RequireJS,所以没有默认的'jquery'
定义是否正确?
But in this case RequireJS is loaded AFTER jQuery (jqueryx) so there will be no default 'jquery'
definition correct?
在我向您展示我的问题之前还有一些背景......文件结构是这样的:
Some more background before I show you my problem... the file structure is like this:
appx
/js:
jqueryx.js
other.js
appx
/custom/js:
jqueryp.js
dostuff.js
看看RequireJS api似乎我应该这样做< a href =http://requirejs.org/docs/jquery.html#noconflictmap =nofollow>类似这样的内容:
Looking at the RequireJS api it seems that I should be doing something like this:
require.config({
baseUrl : 'custom/js',
paths : { 'jquery' : 'jqueryp'},
map: {
'*': { 'jquery': 'jquery-private' },
'jquery-private': { 'jquery': 'jquery' }
}
});
define(['jquery'], function (jq) {
return jq.noConflict( true );
});
require(['jquery'], function(jq){
console.log(jq.fn.jquery);
});
但是当我这样做时,我收到一个错误:
But when I do this I get an error:
Mismatched anonymous define() module: function (jq)...
我玩过切换对 jquery
, jquery-private
的引用,因为它有点像令人困惑但没有进展。
I've played around with switching references to jquery
, jquery-private
as it's kind of confusing but with no progress.
我应该如何应用RequireJS来应对这种情况?
How should I be applying RequireJS to this situation?
推荐答案
差不多一年但总比没有答案好......
Almost a year late but better than no answer at all...
以下部分应移至jquery-private.js文件中:
The following part should be moved into a "jquery-private.js" file:
define(['jquery'], function (jq) {
return jq.noConflict( true );
});
您无法在主入口点定义模块。即使你可以,该模块没有名称,所以你会如何引用它?
You can't define a module in your main entry point. Even if you could, the module has no name so how would you reference it?
这篇关于添加在已经将jquery作为全局的页面上使用jquery的RequireJS模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!