Chargement Highcharts via la cale à l'aide de RequireJS et le maintien de jQuery dépendance
Je suis d'essayer de charger le Highcharts bibliothèque à l'aide d'une cale en RequireJS. Toutefois, lorsque Highcharts charge, il déclenche une exception car il ne peut pas accéder aux méthodes jQuery il dépend.
Le besoin config ressemble à ceci:
require.config({
baseUrl: "js",
shim: {
'libs/highcharts/highcharts.src.js': {
deps: ['jquery'],
exports: function(jQuery)
{
this.HighchartsAdapter = jQuery;
return this.Highcharts;
}
}
}
});
L'exception est levée est:
Uncaught TypeError: undefined is not a function
et est en ce qui concerne cette ligne:
dataLabels: merge(defaultLabelOptions, {
La question est la merge
d'appel, qui a finalement cartes à jQuery (ou tout autre adaptateur que Highcharts prend en charge; mais je suis juste à l'aide de jQuery).
Je ne suis pas sûr exactement comment assurez-vous Highcharts obtient l'accès à jQuery à l'aide de RequireJS et la cale.
Quelqu'un a utilisé RequireJS et Highcharts ensemble avant? Je suppose que le problème n'est pas spécifique à highcharts, mais toute bibliothèque qui a d'autres sortes de dépendances.
Merci d'avance pour tout conseil ou des points pour le bon sens!
Pour ajouter un peu plus de contexte, dans l'espoir que quelqu'un qui est familier avec require.js ou cales seront en mesure d'aider, sans avoir à être trop intimement familier avec highcharts, voici une source qui met en place cette merge
méthode dans 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}
}
La win
objet est un ensemble de référence jusqu'à window
au début du script. Alors, j'ai pensé ajouter window.jQuery = jQuery;
à la méthode d'exportation sur la cale entraînerait highcharts ramasser le jQuery de référence; mais il n'a pas.
Une fois de plus, de perspicacité, d'informations, de conseils, ou de heckles serait apprécié à ce point - je suis à une perte totale, et de partir à la question de savoir si en essayant de mettre en œuvre et AMD système de paquets dans le navigateur javascript est même pas la peine d'elle.
Après l'acceptation de la réponse de pabera ci-dessous, je pense qu'il convient de mettre à jour ma question, afin de donner sa réponse aidé ma solution (bien que, en gros, c'est sa réponse).
RequireJS utilise des "chemins" pour trouver des libs qui ne sont pas "AMD" pris en charge et les charge sur votre page. la "cale" de l'objet permet de définir des dépendances pour les bibliothèques définies dans les chemins. Les dépendances doivent être chargés avant requirejs essaie de charger le script dépendant.
Les exportations de biens fournit un mécanisme pour dire requirejs comment faire pour déterminer si la bibliothèque est chargé. Pour les principales bibliothèques comme jquery, backbone, socketio, etc ils ont tous l'exportation de certains de la fenêtre de niveau variable (Backbone
, io
, jQuery
et $
, etc). Vous suffit d'indiquer que le nom de la variable que l' exports
de la propriété, et requirejs sera en mesure de déterminer si la lib est chargé.
Une fois que vos définitions sont effectuées, vous pouvez utiliser requirejs
' define
fonctionner comme prévu.
Voici mon exemple require.config
objet:
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'
}
}
});
Comme pabera mentionné avant, c'est pour Require.JS
version 2.0.1
.
J'espère que quelqu'un obtient une utilisation en dehors de cela, je sais que c'route m'a bloqué pendant un petit moment; j'espère donc que nous avons gardé vous de frapper votre tête sur le même point dans le mur que nous avons fait, par ce détachement.
Vous devez vous connecter pour publier un commentaire.
J'ai eu exactement le même problème et j'ai eu du mal autour de plusieurs heures jusqu'à ce que j'ai vu votre entrée ici. Puis j'ai recommencé à partir de zéro et maintenant ça fonctionne pour moi au moins.
Depuis que j'utilise Chaplin sur le dessus de l'épine Dorsale, je suis y compris plus de fichiers dans mes chemins de l'attribut. Highcharts est une structure similaire à la Dorsale j'ai donc pensé que je pouvais charger de la même manière. Il fonctionne pour moi maintenant. Comme vous pouvez le voir, je suis l'introduction de highcharts dans les chemins de l'attribut déjà à l'exportation comme une cale de postfaces.
Peut-être que cela aide, sinon nous allons essayer de contribuer encore plus à résoudre votre problème.
require.js 2.0.1
, juste au cas où c'est important. Bonne chanceBien que jQuery peut être utilisé comme un AMD module il sera toujours à l'exportation elle-même à la fenêtre de toute façon pour tous les scripts en fonction du mondial
jQuery
ou$
continuent de fonctionner en tant que jQuery est chargé en premier.Avez-vous essayé la fixation d'un chemin d'accès? jQuery est une question intéressante parce que même si vous êtes encoruaged de ne pas le nom de vos modules par le RequireJS documentation, jQuery dans la réalité.
De l'jQuery source
Ce qui signifie que vous devrez dire à RequireJS où trouver 'jquery'. Donc:
Si vous êtes intéressé, pourquoi jQuery enregistre lui-même de cette façon, alors il y a un assez grand commentaire dans le source qui va plus dans le détail