cách chính xác để thực hiện jQuery với require.js

Question

Tôi đang sử dụng phiên bản ổn định hiện tại của cả hai require.js và jQuery và tôi hiện đang bao gồm jQuery như thế này

requirejs.config({ 
paths: { 
    'jQuery': 'vendor/jquery', 
} 
}); 

require(['jQuery'], function(jQuery) { 
    log(jQuery); // working 
}); 

Những gì tôi không nhận được là tôi không thực sự cần phải cung cấp một cách rõ ràng về jQuery, vì điều này sẽ vẫn làm việc (cũng trong các module khác):

require(['jQuery'], function(// nothing here) { 
    log(jQuery); // working 
}); 

Bây giờ tôi không chắc chắn nếu điều này là đúng cách để làm việc đó, cũng vì sử dụng Ký hiệu $ đô la để tham chiếu đến jQuery không hoạt động!

Answer 1

Các điểm chính như tôi nhìn thấy nó:

1. jQuery khi được sử dụng với RequireJS đăng ký chính nó như là tên mô-đun 'jquery' (tất cả các trường hợp thấp hơn). Trong ví dụ của bạn, bạn đang cố gắng sử dụng nó như là 'jQuery', điều này làm lẫn lộn mọi thứ một chút vì đây cũng là tên của hàm toàn cục mà nó đăng ký khi được nạp (xem điểm # 2).
2. Theo mặc định, jQuery tự đăng ký sử dụng các hàm toàn cục "$" và "jQuery", ngay cả khi được sử dụng với AMD/RequireJS. Nếu bạn muốn tắt hành vi này, bạn phải gọi hàm noConflict.

3. Bạn có thể bọc tham chiếu RequireJS của bạn vào jQuery trong một cuộc gọi noConflict, như được hiển thị trong ví dụ bên dưới. Theo như tôi có thể nói, đây là cách tiếp cận đề nghị khi bạn không có các module khác mà cần $ toàn cầu hoặc jQuery:

   requirejs.config({ 
       paths: { 
        'jquery': 'vendor/jquery', 
       } 
   }); 
   
   define('jquery-private', ['jquery'], function (jq) { 
       return jq.noConflict(true); 
   }); 
   
   require(['jquery-private'], function(jq) { 
       console.log(jq);  // working 
       console.log($);  // undefined 
       console.log(jQuery); // undefined 
   }); 
   

Xem thêm my answer in this question về làm thế nào để lập bản đồ các module khác để sử dụng phiên bản riêng tư (noConflict).

Đối với nền hơn, hãy xem những dòng này từ mã nguồn jQuery mà là nguyên nhân của tất cả những gì tôi mô tả ở trên:

// Expose jQuery to the global object 
    window.jQuery = window.$ = jQuery; 

    // Expose jQuery as an AMD module, but only for AMD loaders that 
    // understand the issues with loading multiple versions of jQuery 
    // in a page that all might call define(). The loader will indicate 
    // they have special allowances for multiple jQuery versions by 
    // specifying define.amd.jQuery = true. Register as a named module, 
    // since jQuery can be concatenated with other files that may use define, 
    // but not use a proper concatenation script that understands anonymous 
    // AMD modules. A named AMD is safest and most robust way to register. 
    // Lowercase jquery is used because AMD module names are derived from 
    // file names, and jQuery is normally delivered in a lowercase file name. 
    // Do this after creating the global so that if an AMD module wants to call 
    // noConflict to hide this version of jQuery, it will work. 
    if (typeof define === "function" && define.amd && define.amd.jQuery) { 
     define("jquery", [], function() { return jQuery; }); 
    } 

UPDATE: các Use with jQuery section of the RequireJS site đã được cập nhật để phản ánh các thông tin trên. Xem thêm this answer cho từng bước bao gồm trình tối ưu hóa. Chỉ muốn nhấn mạnh lại rằng phương pháp noConflict này chỉ hoạt động nếu tất cả các plugin của bạn tương thích với AMD.