Làm thế nào để sử dụng requirejs với zepto

Question

Tôi dường như không thể có được zepto để làm việc với requirejs.

Dưới đây là tác phẩm của tôi

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

Bạn nhận được các hình ảnh .. Nhưng khi Tôi chạy tất cả, tôi nhận được điều này trong Chromes con duy nhất:

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

và một lỗi kịch bản (Tôi đã ném trong ngoặc bc này wouldnt cho tôi gửi.)

và trong Firefox với con đom đóm, nó spits ra một scripterror

Có ai đã thành công cấu hình zepto với yêu cầu và có thể ném cho tôi một số trợ giúp?

Answer 1

Xương sống thường có "xác định ([" dấu gạch dưới "," jquery "," xuất ""], .. "trong đó, chỉ cần phải thay thế. Sau đó, tôi nối đoạn mã sau vào cuối 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; }); 
} 

có vẻ như để làm việc. Nếu bạn muốn có jquery như một sao lưu, (đây là bẩn) nhưng tôi định nghĩa "Zepto" là "jquery" trong tập tin zepto.js, sau đó trong requirejs.config Tôi đã làm điều này ...

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

Nhưng bằng cách đó tôi không phải sửa đổi tệp backbone.js xác định cho jquery và tôi broug ht trong trình duyệt hỗ trợ cho IE ...

Answer 2

Sử dụng tính năng shim của requirejs. Xem này answer. Tránh phải chỉnh sửa nguồn của thư viện mỗi khi tình huống này xảy ra. Ngoài ra, bạn không cần phải nhớ chỉnh sửa mỗi khi bạn cập nhật thư viện lên phiên bản mới hơn.

Thêm tuyên bố từ chối trách nhiệm này, vì @James Watkins cho rằng mọi bài đăng trên SO phải làm việc cho anh ấy nếu không nó sẽ bị giảm bớt: Giải pháp này có thể có hoặc không hoạt động cho bạn (đặc biệt là xem xét nó được viết 3 năm trước !!!)

Answer 3

Bạn có thể thêm một 'mở rộng/zepto.js' tập tin thay vì sửa đổi 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; 

}); 

Sau đó thiết lập đường dẫn đến jqueryextend/zepto:

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

Answer 4

https://github.com/l-zhi/html5-backbone-boilerplate bạn có thể sử dụng nó bằng cách soạn sẵn này với webpack

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