添加在已经将jquery作为全局的页面上使用jquery的RequireJS模块 [英] Adding RequireJS module that uses jquery on a page that already has jquery as a global

查看:60
本文介绍了添加在已经将jquery作为全局的页面上使用jquery的RequireJS模块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个应用程序的附加组件(称为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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆