如何使用requirejs與zepto

Question

我似乎無法得到zepto與requirejs一起使用。

這裏是我的文件

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

你明白了..但是，當我運行這一切，我在Chromes con。中得到這個獨家：

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

和腳本錯誤（我在括號扔BC這wouldnt讓我發表。）

，並在Firefox使用Firebug，它吐出scripterror

任何人都有成功配置zepto與要求，可以給我一些幫助？

Answer 1

主幹通常有一個「define（[」underscore「，」jquery「，」exports「]，..」，應該只需要替換它。然後，我在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; }); 
} 

如果你想擁有jQuery的作爲備份，（這是骯髒的），但我在zepto.js文件中定義的「仄」作爲「jQuery的」，那麼它似乎工作。在requirejs.config我這樣做...

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... 
}); 

但這樣做，我沒有修改Backbone.js的定義文件jQuery和我broug在瀏覽器中支持IE瀏覽器......

Answer 2

使用requirejs的填充功能。看到這個answer。避免每次出現這種情況都必須編輯庫的源代碼。另外，每次將庫更新到新版本時，您都不必記得進行編輯。

添加此免責聲明，因爲@詹姆斯沃特金斯認爲對SO每一個崗位必須爲他，否則應該downvoted工作：該解決方案可能會或可能不會爲你工作（特別是考慮到它是3年前寫的！）

Answer 3

您可以添加一個 '擴展/ zepto.js' 文件，而不是修改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; 

}); 

然後設置jquery路徑extend/zepto：

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

Answer 4

https://github.com/l-zhi/html5-backbone-boilerplate你可以通過這個樣板用的WebPack使用

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