正确加载带有requirejs的webshims / modernizr?

时间:2013-11-19 15:49:33

标签: backbone.js requirejs modernizr webshim

我的index.html文件顶部和main.js中包含了modernizr / pollyfiller:

require.config({
    paths : {
    'jquery' : 'lib/jquery-1.10.2.min',
    'jqdate' : 'lib/jquery.dateFormat-1.0',
    'webshims' : 'lib/polyfiller'
},
shim : {
    'lib/underscore' : {
        exports : '_'
    },
    'lib/backbone' : {
        deps : ["lib/underscore", "jquery"],
        exports : 'Backbone'
    },
    "modernizr" : {
        deps : ["jquery"],
        exports : "modernizr"
    },
    "webshims" : {
        deps : [ "jquery", "lib/modernizr-custom"],
        exports: "webshims"
    }
}
});
var router, vent;

    require(["jquery", "lib/underscore", "lib/backbone", "app", "lib/modernizr-custom", "webshims"], function($, _, Backbone, Router, modernizr, webshims) {

$(function() {
    $.webshims.setOptions('forms forms-ext', {
        replaceUI : false,
        waitReady : false
    });

    $.webshims.polyfill('forms forms-ext');

    router = new Router();
    vent = _.extend({}, Backbone.Events);
    $.expr.cacheLength = 1;

    Backbone.history.start({

    });
});
});

这通常可以很好地加载,但是,有时看起来我尝试调用时没有定义webshims:

    $.webshims.setOptions('forms forms-ext', {
        replaceUI : false,
        waitReady : false
    });

    $.webshims.polyfill('forms forms-ext');

我收到错误:TypeError:$ .webshims is undefined

有没有更好的方法来加载它?

修改 所以,我像你说的那样更新了脚本,并且不得不在路径和填充定义中利用Webshims。它加载正常,但现在我收到一个错误:

Uncaught SyntaxError: Unexpected token <
Chrome中的

SyntaxError: syntax error


<!DOCTYPE html>

在firefox中

1 个答案:

答案 0 :(得分:3)

更新答案

Alexander Farkas在评论中指出polyfiller defines itself as "polyfiller"是这样的:

define('polyfiller', ['jquery'], factory);

所以:

  1. 加载polyfiller.js时不需要垫片。

  2. polyfiller.js定义的模块应始终称为"polyfiller"。因此,必须有paths设置,将模块名称polyfiller映射到polyfiller.js文件的实际路径。

  3. 因此,应修改原始配置以删除"webshims"垫片,然后paths设置"webshims": "lib/polyfiller"应变为"polyfiller": "lib/polyfiller",并且需要调用:

    require(["jquery", "lib/underscore", "lib/backbone", "app", "lib/modernizr-custom", "polyfiller"], function($, _, Backbone, Router, modernizr) {
    

    我从函数的参数中删除了最后一个变量,因为polyfiller.js文件将自己注册为$.webshims,因此无需传递模块值。

    这类似于jQuery如何将自己定义为"jquery"(它不需要垫片,总是被称为"jquery")。

    原始答案

    更改require来电,这样您就需要"webshims"代替"lib/polyfiller"

    require(["jquery", "lib/underscore", "lib/backbone", "app", "lib/modernizr-custom", "webshims"], ...
    

    您问题中的代码显示您已设置paths配置选项,以便模块名称"webshims"解析为"lib/polyfiller",并为其创建看似合理的垫片。但是,当您需要webshims模块时,请将其称为"lib/polyfiller"。 RequireJS没有做出反向解析,以确定"lib/polyfiller""webshims"

    或者,您可以从"webshims"中删除paths名称并重命名垫片,以便将其设置为"lib/polyfiller"。但是,我认为在整个应用程序中通过单字名称引用第三方库是一种更好的做法,而不是为它们提供路径。所以“jquery”,“bootstrap”,“下划线”和“webshims”等而不是“lib /...".