Đang tải Highcharts qua shim bằng cách sử dụng RequireJS và duy trì phụ thuộc jQuery

Question

Tôi đang cố gắng tải thư viện Highcharts bằng cách sử dụng một shim trong RequireJS. Tuy nhiên, khi Highcharts tải, nó ném một ngoại lệ vì nó không thể truy cập các phương thức jQuery mà nó phụ thuộc vào.

Các yêu cầu cấu hình trông giống như vậy:

require.config({ 
    baseUrl: "js", 

    shim: { 

     'libs/highcharts/highcharts.src.js': { 
      deps: ['jquery'], 
      exports: function(jQuery) 
      { 
       this.HighchartsAdapter = jQuery; 

       return this.Highcharts; 
      } 
     } 
    } 
}); 

Trường hợp ngoại lệ được ném là:

Uncaught TypeError: undefined is not a function 

và là liên quan đến dòng này:

dataLabels: merge(defaultLabelOptions, { 

Vấn đề là cuộc gọi merge, cuối cùng sẽ tự ánh xạ trở lại jQuery (hoặc một số bộ điều hợp khác mà Highch hỗ trợ nghệ thuật; nhưng tôi chỉ sử dụng jQuery).

Tôi không chắc chắn chính xác cách đảm bảo Highcharts được truy cập vào jQuery bằng cách sử dụng RequireJS và shim.

Có ai đã sử dụng RequireJS và Highcharts cùng nhau trước đây không? Tôi đoán vấn đề không cụ thể đối với highcharts, nhưng bất kỳ thư viện nào có các loại phụ thuộc khác.

Cảm ơn trước cho bất kỳ lời khuyên hoặc điểm nào về đúng hướng!

Để thêm bối cảnh hơn nữa, với hy vọng rằng một người quen thuộc với require.js hoặc miếng chêm sẽ có thể giúp đỡ mà không cần phải quá quen thuộc với highcharts, đây là một số nguồn mà thiết lập phương pháp merge này trong Highcharts

var globalAdapter = win.HighchartsAdapter, 
adapter = globalAdapter || {}, 

// Utility functions. If the HighchartsAdapter is not defined, 
// adapter is an empty object 
// and all the utility functions will be null. In that case they are 
// populated by the 
// default adapters below. 

// {snipped code} 

merge = adapter.merge 

// {snipped code} 

if (!globalAdapter && win.jQuery) { 
    var jQ = win.jQuery; 

    // {snipped code} 

    merge = function() { 
     var args = arguments; 
     return jQ.extend(true, null, args[0], args[1], args[2], args[3]); 
    }; 

    // {snipped code} 
} 

Đối tượng win là một tài liệu tham khảo thiết lập để window vào đầu của kịch bản. Vì vậy, tôi nghĩ rằng việc thêm window.jQuery = jQuery; vào phương thức xuất trên shim sẽ dẫn đến highcharts chọn tham chiếu jQuery; nhưng không.

Một lần nữa, bất kỳ thông tin chi tiết, thông tin, lời khuyên hoặc heckles nào sẽ được đánh giá cao tại thời điểm này - tôi mất hoàn toàn và bắt đầu đặt câu hỏi liệu có cố gắng triển khai và hệ thống gói AMD trong javascript của trình duyệt hay không.

---

Sau khi chấp nhận câu trả lời từ pabera dưới đây, tôi nghĩ rằng nó thích hợp để cập nhật câu hỏi của tôi để phản ánh như thế nào câu trả lời của ông đã giúp tôi giải pháp (mặc dù, đó là về cơ bản câu trả lời của mình).

RequireJS sử dụng "đường dẫn" để tìm các thư viện không phải là "AMD" được hỗ trợ và tải chúng trên trang của bạn. đối tượng "shim" cho phép bạn định nghĩa các phụ thuộc cho các thư viện được định nghĩa trong đường dẫn. Các phụ thuộc phải được nạp trước khi requirejs sẽ cố gắng tải tập lệnh phụ thuộc.

Thuộc tính xuất khẩu cung cấp cơ chế để yêu cầu requirejs cách xác định xem thư viện có được tải hay không. Đối với các libs lõi như jquery, backbone, socketio, vv, tất cả chúng đều xuất một số biến mức cửa sổ (Backbone, io, jQuery và $, v.v ...). Bạn chỉ cần cung cấp tên biến đó làm thuộc tính exports và requirejs sẽ có thể xác định thời điểm tải lib.

Khi định nghĩa của bạn được thực hiện, bạn có thể sử dụng chức năng requirejs 'define như mong đợi.

Dưới đây là ví dụ của tôi require.config đối tượng:

require.config({ 
    baseUrl: "/js/", 

    paths: { 
     jquery: 'jquery', 
     socketio: 'http://localhost:8000/socket.io/socket.io', //for loading the socket.io client library 
     highcharts: 'libs/highcharts/highcharts.src', 
     underscore: 'libs/underscore', 
     backbone: 'libs/backbone' 
    }, 

    shim: { 
     jquery: { 
      exports: 'jQuery' 
     }, 

     socketio: { 
      exports: 'io' 
     }, 

     underscore: { 
      exports: '_' 
     }, 

     backbone: { 
      deps: ['jquery', 'underscore'], 
      exports: 'Backbone' 
     }, 

     highcharts: { 
      deps: ['jquery'], 
      exports: 'Highcharts' 
     } 
    } 
}); 

Như pabera đề cập trước đây, điều này là dành cho phiên bản Require.JS2.0.1.

Tôi hy vọng một người nào đó sẽ được sử dụng trong số này; Tôi biết đường đã chặn tôi một lúc; vì vậy hy vọng chúng tôi giữ cho bạn khỏi đập đầu của bạn vào cùng một vị trí trong bức tường mà chúng tôi đã làm, bằng cách đăng này.

Answer 1

tôi đã có vấn đề chính xác cùng và tôi đã vật lộn ở mức nhiều giờ cho đến khi tôi nhìn thấy mục nhập của bạn đây. Sau đó, tôi bắt đầu lại từ đầu và bây giờ nó làm việc cho tôi ít nhất.

requirejs.config({ 
    baseUrl:'/js/', 
    paths:{ 
     jquery:'vendor/jquery', 
     handlebars: 'vendor/handlebars', 
     text: 'vendor/require-text', 
     chaplin:'vendor/chaplin', 
     underscore:'vendor/underscore', 
     backbone:'vendor/backbone', 
     highcharts: 'vendor/highcharts' 
    }, 

    shim: { 
     backbone: { 
     deps: ['underscore', 'jquery'], 
     exports: 'Backbone' 
     }, 
     underscore: { 
     exports: '_' 
     },  
     highcharts: { 
     exports: 'Highcharts' 
     }  
    }, 
}); 

Vì tôi sử dụng Chaplin trên đầu trang của xương sống, tôi bao gồm một số tệp khác trong thuộc tính đường dẫn của tôi. Highcharts có cấu trúc tương tự như Backbone nên tôi nghĩ tôi có thể tải nó theo cùng một cách. Nó làm việc cho tôi bây giờ. Như bạn có thể thấy, tôi đang giới thiệu highcharts trong thuộc tính đường dẫn đã xuất nó thành một từ sau shim.

Có thể điều này sẽ giúp, nếu không, hãy cố gắng đóng góp vào nó nhiều hơn để giải quyết vấn đề của bạn.

Answer 2

Mặc dù jQuery có thể được sử dụng làm mô-đun AMD, nó vẫn tự xuất ra cửa sổ, vì vậy mọi tập lệnh tùy thuộc vào toàn cầu jQuery hoặc $ sẽ vẫn hoạt động miễn là jQuery đã tải trước.

Bạn đã thử đặt đường dẫn chưa? jQuery là một trong những thú vị bởi vì mặc dù bạn đang encoruaged không đặt tên mô-đun của bạn bằng tài liệu RequireJS, jQuery thực sự không.

Từ nguồn jQuery

if (typeof define === "function" && define.amd && define.amd.jQuery) { 
    define("jquery", [], function() { return jQuery; }); 
} 

Điều đó có nghĩa là bạn sẽ cần phải nói RequireJS nơi để tìm 'jquery'. Vì vậy:

require.config({ 
    paths: { 
     'jquery': 'path/to/jquery' 
    } 
}); 

Nếu bạn quan tâm đến lý do tại sao jQuery đăng ký chính nó theo cách này sau đó there is a pretty large comment in the source mà đi vào chi tiết hơn