Question

我正在尝试将waypoints与zepto和RequireJS一起使用。

我的requireJS配置如下所示：

requirejs : {
options : {
    baseUrl : '<%= config.app.js %>',
    paths : {
        almond : '../node_modules/almond/almond',
        zepto : '../node_modules/zepto/zepto.min',
        'progressbar' : '../node_modules/progressbar.js/dist/progressbar',
        waypoints : '../node_modules/waypoints/lib/zepto.waypoints'
    },
    shim : {
        zepto : {
            exports : '$'
        }
    },
    mainConfigFile: '<%= config.app.js %>/common.js',
    include : ['common'],
    name : 'almond',
    out : 'dist/js/<%= pkg.name %>.js', 
    insertRequire: ['common'],
    wrap: true
},
dist : {
    options : {
        optimize: 'uglify2'
    }
},
dev : {
    options : {
        optimize: 'none'
    }
}
},

此外，我的common.js文件如下：

define(['zepto', 'waypoints'], function($) {

var waypoint = $('#experience').waypoint({
    handler: function(direction) {}
});

}）;

但是当页面加载时，我收到以下错误：

Uncaught TypeError: Cannot read property 'apply' of undefined

错误来自waypoints插件库中的这一行：

return this.$element[method].apply(this.$element, args)

当我调试代码时，我可以看到function ZeptoAdapter(element)被调用两次，一次以$('#experience')为元素，一次调用window。第二次是失败，因为this.$element未定义。难道我做错了什么？包含zepto插件的正确方法是什么？

谢谢，

Answer 1

Waypoint没有为CommonJS或AMD导出任何内容。我相信你也需要小心它：

shim : {
  zepto : {
    exports : '$'
  },
  waypoints: {
    deps: ['zepto'],
    exports: 'Waypoint'
  }
}

Answer 2

这解决了我的问题

shim : {
    jqueryWaypoints:{
        deps: ['jquery'],
        exports: 'jqueryWaypoints'
   }
}

RequireJS + Zepto + Waypoints：无法读取属性＆＃39; apply＆＃39;未定义的

2 个答案: