使用RequireJS通过shim加载Highcharts并保持jQuery依赖 [英] Loading Highcharts via shim using RequireJS and maintaining jQuery dependency
问题描述
我试图在RequireJS中使用Shim来加载Highcharts库。然而，当Highcharts加载时，它会抛出一个异常，因为它无法访问它所依赖的jQuery方法。
require配置看起来像这样：
require.config（{
aseUrl：js，
shim：{
'libs / highcharts / highcharts.src.js'：{
deps：['jquery']，
exports：function（jQuery）
{
this.HighchartsAdapter = jQuery;
return this.Highcharts;
}
}
}
}）;
抛出的异常是：
Uncaught TypeError：undefined不是函数
关于这一行：
dataLabels：merge（defaultLabelOptions，{
问题在于 merge 调用，它最终将自己映射回jQuery（或Highcharts支持的其他某个适配器;但我只是使用jQuery）。
我不确定如何确保Highcharts使用RequireJS和shim访问jQuery。
有人曾经使用过RequireJS和Highcharts吗？我想这个问题并不是特定于highcharts，而是任何具有其他类型依赖性的库。
预先感谢任何建议或指向正确的方向！
为了增加更多的上下文，希望熟悉require .js或垫片将能够帮助ut必须非常熟悉highcharts，下面是一些在Highcharts中设置 merge 方法的源代码
var globalAdapter = win.HighchartsAdapter，
adapter = globalAdapter || {}，
//效用函数。如果HighchartsAdapter未定义，
//适配器是一个空对象
//并且所有实用函数都将为空。在这种情况下，它们是
//由下面的
//默认适配器填充。
// {剪下的代码}
合并= adapter.merge
// {剪下的代码}
if （！globalAdapter& win.jQuery）{
var jQ = win.jQuery;
// {截取的代码}
merge = function（）{
var args = arguments;
return jQ.extend（true，null，args [0]，args [1]，args [2]，args [3]）;
};
// {剪下的代码}
}
code> win object是在脚本开始处设置为 window 的引用。所以，我认为将> window.jQuery = jQuery; 添加到垫片上的导出方法会导致获取jQuery引用的高度图;但它没有。
再次，任何见解，信息，建议，或heckles将赞赏在这一点上 - 我完全丧失，并开始问题是否试图在浏览器中实现和AMD包系统javascript甚至是值得的。
在接受 pabera 下面我认为它适合更新我的问题，以反映他的答案如何帮助我的解决方案（虽然，这基本上是他的答案）。
RequireJS使用路径找到不支持AMD的库并将它们加载到页面上。 shim对象允许您定义路径中定义的库的依赖关系。在requirejs尝试加载依赖脚本之前，必须加载依赖关系。
exports属性提供了一种机制来告诉requirejs如何确定库是否已加载。对于像jquery，backbone，socketio等核心库，它们都会导出一些窗口级别的变量（ Backbone ， io ， jQuery 和 $ 等）。您只需提供该变量名称作为 exports 属性，并且requirejs将能够确定lib何时加载。
定义完成后，您可以按预期方式使用 requirejs ' define 函数。
以下是我的示例 require.config object：
require.config（{
aseUrl：/ js /，
paths：{
jquery：'jquery'，
socketio：'http ：// localhost：8000 / socket.io / socket.io'，//用于加载socket.io客户端库
highcharts：'libs / highcharts / highcharts.src'，
下划线：'libs / underscore'，
backbone：'libs / backbone'
}，
shim：{
jquery：{
exports：'jQuery'
$，
socketio：{
exports：'io'
}，
下划线：{
exports：'_ '
}，
backbone：{
deps：['jquery'，'undercore']，
exports：'Backbone'
}，
highcharts：{
deps：['jquery']，
出口：'Highcharts'
}
}
}）;
之前提到的 pabera ，这是 Require.JS 版本 2.0.1 。
我希望有人可以使用这个的;我知道这一路堵住了我一会儿;所以希望我们不要把你的头撞到我们所做的墙上的同一个地方，通过发布这个。 有完全相同的问题，我在几个小时内挣扎着，直到我看到你在这里进入。然后我从头开始，现在它至少适用于我。
requirejs.config（{
baseUrl： '/ js /'，
路径：{
jquery：'vendor / jquery'，
handlebars：'vendor / handlebars'，
text：'vendor / require-text' ，
chaplin：'vendor / chaplin'，
下划线：'vendor / underscore'，
backbone：'vendor / backbone'，
highcharts：'vendor / highcharts'
$ b bim：{
backbone：{
deps：['underscore'，'jquery']，
exports：'Backbone'
$，b $ b出口：{
出口：'_'
}，
highcharts：{
出口：'Highcharts'
}
}，
}）;
由于我使用卓别林在Backbone之上，我在我的路径属性中包含了一些更多的文件。 Highcharts与Backbone具有相似的结构，因此我认为我可以用相同的方式加载它。现在它适用于我。正如你所看到的，我在paths属性中引入了highcharts，以便将它作为一个shim后缀输出。
也许这会有所帮助，否则我们会尝试为它贡献更多解决你的问题。
I'm attempting to load the Highcharts library using a shim in RequireJS. However, when Highcharts loads, it throws an exception because it can't access the jQuery methods it depends on.
The require config looks like so:
require.config({
baseUrl: "js",
shim: {
'libs/highcharts/highcharts.src.js': {
deps: ['jquery'],
exports: function(jQuery)
{
this.HighchartsAdapter = jQuery;
return this.Highcharts;
}
}
}
});
The exception that is thrown is:
Uncaught TypeError: undefined is not a function
and is in regards to this line:
dataLabels: merge(defaultLabelOptions, {
The issue is the merge call, which eventually maps itself back to jQuery (or some other adapter that Highcharts supports; but I'm just using jQuery).
I'm not sure exactly how to make sure Highcharts gets access to jQuery using RequireJS and shim.
Has anyone used RequireJS and Highcharts together before? I guess the issue isn't specific to highcharts, but any library that has other sorts of dependencies.
Thanks in advance for any advice or points to the correct direction!
To add further context, in hopes that someone who is familiar with require.js or shims will be able to help without having to be too intimately familiar with highcharts, here's some source that sets up this merge method in 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}
}
The win object is a reference set up to window at the beginning of the script. So, I thought adding window.jQuery = jQuery; to the export method on the shim would result in highcharts picking up the jQuery reference; but it didn't.
Again, any insight, info, advice, or heckles would be appreciated at this point - I'm at a complete loss, and starting to question whether trying to implement and AMD package system in browser javascript is even worth it.
After accepting the answer from pabera below I thought it appropriate to update my question to reflect how his answer helped my solution (though, it's basically his answer).
RequireJS uses "paths" to find libs that aren't "AMD" supported and loads them on your page. the "shim" object allows you to define dependencies for the libraries defined in paths. The dependencies must be loaded before requirejs will try to load the dependent script.
The exports property provides a mechanism to tell requirejs how to determine if the library is loaded. For core libs like jquery, backbone, socketio, etc they all export some window level variable (Backbone, io, jQuery and $, etc). You simply provide that variable name as the exports property, and requirejs will be able to determine when the lib is loaded.
Once your definitions are done, you can use requirejs' define function as expected.
Here's my example require.config object:
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'
}
}
});
As pabera mentioned before, this is for Require.JS version 2.0.1.
I hope someone gets some use out of this; I know it road blocked me for a little while; so hopefully we kept you from banging your head into the same spot in the wall that we did, by posting this.
I had the exact same problem and I was struggling around many hours until I saw your entry here. Then I started over from scratch and now it works for me at least.
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'
}
},
});
Since I use Chaplin on top of Backbone, I am including some more files in my paths attribute. Highcharts has a similar structure to Backbone so I thought I could load it the same way. It works for me now. As you can see, I am introducing highcharts in the paths attribute already to export it as a shim afterwords.
Maybe this helps, otherwise let's try to contribute on it even more to solve your problem.
这篇关于使用RequireJS通过shim加载Highcharts并保持jQuery依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
