How to use requirejs with zepto

Question

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?

Finicky

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. – Ebberta

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? – Finicky

Answer 1

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...

Sauternes

The first part help me a lot because it makes whats supouse to do, the second I didnt tried – Dashpot

Yeah, second part I don't recommend. Actually I don't recommend using Zepto with Backbone. There is now Backbone.native which I have no tried but looks more promising of a replacement of jquery with backbone. – Sauternes

Modify the source code of a common library file? That's a bad idea. And I have no idea what you're doing in that config, I would never recommend this. – Goidelic

This is an old code sample, and at the time this was how I worked around it. I wouldn't use any of this. – Sauternes

Answer 2

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!!!)

Endurant

This didn't work for me. Tried setting the exports to Zepto and $ but both gave undefined when importing. Consider revising your answer with a working example. – Goidelic

@JamesWatkins I appreciate the comment and the suggestion for improving answer. It's poor form though for you to mark down a response because it didn't work for you, or there isn't a working example. Clearly, others found it useful since it didn't have 0 points when you came upon it. I have to wonder if all of your responses on SO have working examples. Or perhaps if the glass is half-full, to you it's actually empty. – Endurant

I tried it and it didn't work. That's a valid enough reason to mark down a response. My comment explained how you could've improved. I don't see the issue here. – Goidelic

@jamesWatkins Cool. I modified the answer for you. – Endurant

I'm only trying to promote answers that are clear and functional. If you think your answer is old and no longer relevant, you should consider deleting it to avoid future confusion. This site is about getting answers, not getting points. – Goidelic

Answer 3

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'
  }
})

Aril

This is the only solution that worked for me without modifying the source code. Thanks! – Goidelic

Answer 4

https://github.com/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
}},

Anticipate