如何正确使用RequireJS及其配置

时间:2013-06-27 05:04:21

标签: javascript requirejs config

我在RequireJS遇到了很多麻烦,我只是使用define模块就会出错。

我们假设我有这样的配置:

require.config({
    baseUrl: "js/",
    paths: {
        jquery: "libs/jquery/jquery-2.0.2.min",
        handlebars: "libs/backbone/template/handlebars",
        lodash: "libs/backbone/template/lodash.min",
        backbone: "libs/backbone/backbone-1.0.0.min",
        helper:"app/helper",
        jquery_cookie:"libs/jquery/plugin/jquery.cookie",
        text:"libs/require/text-2.0.7"
    },
    shim: {
        "lodash": {
            exports: '_'
        },
        "handlebars": {
            deps:["jquery"],
            exports: 'Handlebars'
        },
        "backbone": {
            deps: ["helper", "lodash", "handlebars", "jquery"],
            exports: "Backbone"
        }
    },
    urlArgs: "bust=" + (new Date()).getTime()
});


define(["jquery"], function ($) {
    console.log('define "jquery" on config.js');
    return $;
});
console.log("end config.js");

首先,我尝试了经典方式,我已经加载了一个config文件,其中我拥有JavaScript个文件的所有依赖项,我正在使用jQuery,{ {1}}和其他库。

Backbone

使用此配置,我会收到这些错误并记录序列:

<script type="text/javascript" data-main="config" src="js/libs/require/require-2.1.6.min.js"></script>
<script type="text/javascript">
    require(["jquery"], function ($) {
        console.log("jquery loaded");
    });
</script>

似乎错误被引用到函数Uncaught Error: Mismatched anonymous define() module: function (){return r} > http://requirejs.org/docs/errors.html#mismatch end config.js define "jquery" on config.js

我认为这是一个加载问题,因此我尝试使用RequireJS site中描述的var require.config(...);而不解决它。

荒谬的是我正在使用require内置的全屏应用程序使用相同的配置而没有遇到任何问题,这里我需要更多地使用不同的视图而且我无法启动,基本上整个区别是我在这里使用Backbone

为什么这不起作用,我错了?

1 个答案:

答案 0 :(得分:2)

您使用的jQuery版本已经支持AMD。所以你不必使用垫片。您可以直接提供路径并开始使用它。

由于模块已经在jQuery库中定义,因此当您尝试重新定义它时会抛出错误。以下代码尝试定义匿名模块。

define(["jquery"], function ($) {
     console.log('define "jquery" on config.js');
     return $;
});

删除上面的代码,应该可以正常工作。以下代码使用require方法加载jquery模块。

require(["jquery"], function ($) {
     console.log($(document));
});

希望这有效。