6

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?

Peter Olson
  • 139,199
  • 49
  • 202
  • 242
Ricky Hartmann
  • 891
  • 1
  • 7
  • 20
  • 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 Nov 17 '12 at 02: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 Nov 18 '12 at 19:01

4 Answers4

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

Community
  • 1
  • 1
Julian A.
  • 10,928
  • 16
  • 67
  • 107
  • 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. – James Watkins Mar 06 '16 at 15:25
  • @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. – Julian A. Mar 06 '16 at 20:08
  • 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. – James Watkins Mar 06 '16 at 20:11
  • @jamesWatkins Cool. I modified the answer for you. – Julian A. Mar 06 '16 at 20:56
  • 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. – James Watkins Mar 06 '16 at 21:14
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...

gwing33
  • 230
  • 2
  • 7
  • The first part help me a lot because it makes whats supouse to do, the second I didnt tried – daver May 24 '13 at 20:25
  • 1
    Yeah, second part I don't recommend. Actually I don't recommend using Zepto with Backbone. There is now [Backbone.native](https://github.com/inkling/backbone.native) which I have no tried but looks more promising of a replacement of jquery with backbone. – gwing33 Jun 11 '13 at 03:41
  • 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. – James Watkins Mar 06 '16 at 15:28
  • This is an old code sample, and at the time this was how I worked around it. I wouldn't use any of this. – gwing33 Mar 07 '16 at 16:15
1

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'
  }
})
John Xiao
  • 1,680
  • 2
  • 18
  • 24
0

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
}},
Lizhi
  • 1
  • 1