I can't seem to get zepto to work with requirejs.

Here are my files

main.js

require.config({
  paths: {
    zepto: 'libs/zepto/zepto.min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    cordova: 'libs/cordova/cordova-2.1.0',
    history: 'libs/history/history',
    historyZ: 'libs/history/history.adapter.zepto'
  },
  shim: {
        zepto: {
          exports: '$'
        },
        backbone: {
            deps: ['underscore', 'zepto']
        }}
});

require([

  // Load our app module and pass it to our definition function
  'app',
], function(App){
  // The "app" dependency is passed in as "App"
  App.initialize();
});

app.js

define([
  'zepto',
  'underscore',
  'backbone',
  'router' // Request router.js
], function($, _, Backbone, Router){
  var initialize = function(){
    // Pass in our Router module and call it's initialize function
    Router.initialize();
  }

  return {
    initialize: initialize
  };
});

router.js

define([
  'zepto',
  'underscore',
  'backbone',
  'views/dashboard'
], function($, _, Backbone, DashboardView){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
        ''      : 'showDashboard',
    }
  });

  var initialize = function(){
    var app_router = new AppRouter;
    app_router.on('showDashboard', function(){
        // We have no matching route, lets just log what the URL was
        //console.log('No route:', actions);
        var dashboardView = new DashboardView();
        dashboardView.render();
      });
    Backbone.history.start();
  };
  return {
    initialize: initialize
  };
});

You get the picture.. But when I run this all, I get this in Chromes console:

GET http://localhost/SBApp/www/js/jquery.js 404 (Not Found)         require.js:1824

and a script error (I threw in parenthesis bc this wouldnt let me post.)

and in Firefox with firebug, it spits out a scripterror

Has anyone had success configuring zepto with require and can throw me some help?

I can't seem to get zepto to work with requirejs.

Here are my files

main.js

require.config({
  paths: {
    zepto: 'libs/zepto/zepto.min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    cordova: 'libs/cordova/cordova-2.1.0',
    history: 'libs/history/history',
    historyZ: 'libs/history/history.adapter.zepto'
  },
  shim: {
        zepto: {
          exports: '$'
        },
        backbone: {
            deps: ['underscore', 'zepto']
        }}
});

require([

  // Load our app module and pass it to our definition function
  'app',
], function(App){
  // The "app" dependency is passed in as "App"
  App.initialize();
});

app.js

define([
  'zepto',
  'underscore',
  'backbone',
  'router' // Request router.js
], function($, _, Backbone, Router){
  var initialize = function(){
    // Pass in our Router module and call it's initialize function
    Router.initialize();
  }

  return {
    initialize: initialize
  };
});

router.js

define([
  'zepto',
  'underscore',
  'backbone',
  'views/dashboard'
], function($, _, Backbone, DashboardView){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
        ''      : 'showDashboard',
    }
  });

  var initialize = function(){
    var app_router = new AppRouter;
    app_router.on('showDashboard', function(){
        // We have no matching route, lets just log what the URL was
        //console.log('No route:', actions);
        var dashboardView = new DashboardView();
        dashboardView.render();
      });
    Backbone.history.start();
  };
  return {
    initialize: initialize
  };
});

You get the picture.. But when I run this all, I get this in Chromes console:

GET http://localhost/SBApp/www/js/jquery.js 404 (Not Found)         require.js:1824

and a script error (I threw in parenthesis bc this wouldnt let me post.)

and in Firefox with firebug, it spits out a scripterror

Has anyone had success configuring zepto with require and can throw me some help?

• javascript
• backbone.js
• requirejs
• zepto
• frontend

• Did you grep your libs and source for any mention of "jquery"? It seems terribly odd that any lib would independently try to include it. – numbers1311407 Commented Nov 17, 2012 at 2:53
• I did and the only thing that referenced jQuery was require. I guess when I try to use AMD with it, it looks for it and I've been looking around a bit seeing theres no support for Zepto and AMD yet? – Ricky Hartmann Commented Nov 18, 2012 at 19:01

4 Answers 4

Use requirejs's shim feature. See this answer. Avoids having to edit a library's source every time this situation occurs. Plus, you don't have to remember to make the edit every time you update the library to a newer version.

Adding this disclaimer, because @James Watkins thinks every post on SO must work for him otherwise it should be downvoted: This solution may or may not work for you (especially considering it was written 3 years ago!!!)

Backbone normally has a "define(["underscore","jquery","exports"],.." in it, should just have to replace that. Then, I appended the following snippet at the end of zepto.js.

// If `$` is not yet defined, point it to `Zepto`
window.Zepto = Zepto
'$' in window || (window.$ = Zepto)

if ( typeof define === "function" && define.amd ) {
  define( "zepto", [], function () { return Zepto; } );
}

It seems to work. If you want to have jquery as a back up, (this is dirty) but I defined "zepto" as "jquery" in the zepto.js file, then in the requirejs.config I did this...

requirejs.config({
  paths: {
      // Jquery should be zepto, probably a better way to do this...
      jquery: RegExp(" AppleWebKit/").test(navigator.userAgent) ? '/js/vendor/zepto' : '/js/vendor/jquery.min',
      underscore: '/js/vendor/underscore.min',
      backbone: '/js/vendor/backbone.min'
  }
});

require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  // Stuff here...
});

But By doing that I didn't have to modify the backbone.js define file for jquery and I brought in browser support for IE...

You can add a 'extend/zepto.js' file instead of modify Zepto.js:

/**
 * extend Zepto
 */

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

  "use strict";

  window.Zepto = Zepto
  // If `$` or `jQuery` is not yet defined, point them to `Zepto`
  '$' in window || (window.$ = Zepto)
  'jQuery' in window || (window.jQuery = Zepto)

  return Zepto;

});

Then set jquery path to extend/zepto:

require.config({
  paths: {
    'jquery': 'extend/zepto'
  }
})

https://github./l-zhi/html5-backbone-boilerplate you can use it by this boilerplate with webpack

resolve: { alias: {
     "jquery": 'xxx/zepto.js' // or jquery.js for PC
}},