Cajon est un chargeur de modules JavaScript pour le navigateur qui peut charger les modules CommonJS/node et AMD. Il est construit sur RequireJS.
Vous pouvez l'utiliser pour coder des modules pour votre projet dans le style CommonJS/node, puis utiliser l'optimiseur RequireJS pour créer tous les modules dans un ensemble compatible AMD. Cela vous permet ensuite d'utiliser une petite cale d'API AMD, comme Amanda, pour obtenir un code bien optimisé sans avoir besoin d'un chargeur d'exécution complet.
Pourquoi utiliser ceci au lieu de RequireJS ? Quelques raisons possibles :
define ( function ( require ) {
/*module code here */
} ) ;
Sinon, vous devriez utiliser RequireJS ou un autre chargeur AMD.
Notez la section Restrictions ci-dessous. Vous grincerez probablement des dents de frustration si vous n’y prêtez pas attention.
Si vous n'aimez pas ce chargeur en particulier, mais que vous aimez l'idée d'un double chargeur de module de style AMD et CommonJS/node, alors vous aimerez peut-être mieux le chargeur Inject de LinkedIn.
Cajon est construit avec :
//@ sourceURL=
pour spécifier les noms de script pour les débogueurs de script. Cajon n'utilisera l'approche XHR+eval que si la requête concerne le même domaine que le document HTML. Si la requête de script est considérée comme se trouvant sur un autre domaine, elle déléguera simplement à la fonction requirejs.load() par défaut, où elle chargera le script avec une balise et s'attendra à ce qu'il soit au format AMD, ou un script traditionnel "globaux de navigateur".
Vous pouvez remplacer ce comportement pour utiliser XHR pour certaines requêtes inter-domaines si vous savez que vos utilisateurs utiliseront des navigateurs et des serveurs compatibles CORS. Voir la section Configuration ci-dessous.
Les scripts récupérés sont encapsulés dans le wrapper AMD suivant :
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
et il permet l'utilisation de __dirname et __filename à l'intérieur de ce code encapsulé.
Cajon attribue à la variable cajon
la même chose que la variable requirejs
, vous pouvez donc l'utiliser si vous souhaitez spécifiquement appeler l'utilisation de cajon. Cependant, l'optimiseur requirejs ne comprend que require
, requirejs
et define
, il ne comprendra pas cajon
. Ceci est particulièrement important si vous utilisez l'option mainConfigFile
de l'optimiseur.
Il est préférable d'utiliser simplement le require
global si vous souhaitez que le code soit portable vers RequireJS, Amanda et d'autres chargeurs AMD, et de ne détecter le cajon
que si vous voulez savoir si le cajon est disponible.
Il existe un répertoire demo
qui montre un exemple d'utilisation, mais en gros, placez cajon.js dans une balise et chargez les modules via
require([])
. Notez cependant la section Restrictions ci-dessous.
Pour optimiser la démo, exécutez :
node tools/r.js -o demo/app.build.js
Cela générera le projet optimisé dans un répertoire demo-built
. Tous les modules de la sortie de construction auront été convertis au style AMD, afin qu'ils puissent être chargés entre domaines sans avoir besoin de considérations CORS particulières.
Le profil de build app.build.js nécessite que l'optimiseur r.js soit la version 2.0.2 ou ultérieure, car il utilise l'option de build cjsTranslate
de 2.0.2 qui convertit les modules CommonJS/node pour qu'ils soient encapsulés avec definition() pour la build.
Si vous utilisez volo :
volo add cajon
Si vous utilisez npm :
npm install cajon
Ou URL vers la dernière version :
https://raw.github.com/requirejs/cajon/latest/cajon.js
Ne vous attendez donc pas à ce que npm install
du code, puis à pouvoir l'exiger en utilisant cajon.
Node utilise plusieurs recherches de chemin node_modules
pour trouver du code, ce qui n'est pas efficace dans un contexte de navigateur. En outre, de nombreux modules de nœud dépendent de la bibliothèque standard du nœud ou de l'environnement de celui-ci, qui ne sont pas disponibles par défaut dans le navigateur Web.
Si vous souhaitez utiliser du code installé par NPM et que vous savez qu'il s'exécutera dans le navigateur, vous pouvez le faire fonctionner avec Cajon, mais vous devrez probablement utiliser la configuration paths , map et packages requirejs pour l'obtenir. travail.
Les systèmes de modules CommonJS/node sont des systèmes d’E/S de fichiers locaux synchrones. Ils autorisent donc ces types de constructions :
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
Le premier exemple échouera dans un environnement de navigateur AMD, puisque toutes les dépendances doivent être connues, téléchargées et exécutées avant l'exécution du code. Si « a » et « b » ne sont pas déjà dans cet état, ce premier exemple générera probablement une erreur.
Le deuxième exemple peut fonctionner, mais sachez que le chargeur AMD téléchargera et exécutera « a » et « b » avant d'exécuter ce code.
Si vous utilisez une décision d'exécution pour récupérer une dépendance, utilisez le style de rappel require() pris en charge par les chargeurs AMD :
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
Ou envisagez de créer un plugin de chargeur AMD qui peut effectuer la logique de décision tout en étant traité comme une dépendance littérale à chaîne unique :
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
Les plugins require et loader de style rappel sont utilisables avec cajon car il utilise simplement requirejs dans les coulisses.
Cajon n'utilisera l'approche XHR+eval que si la requête concerne le même domaine que le document HTML. Vous pouvez remplacer ce comportement si vous savez que des navigateurs et des serveurs compatibles CORS seront utilisés.
Configurez une fonction useXhr
dans une configuration cajon
transmise au chargeur :
require . config ( {
cajon : {
useXhr : function ( url , protocol , hostname , port ) {
//Return true if XHR is usable, false if the
//script tag approach to an AMD module/browser globals
//script should be used.
//url is the url being requested.
//protocol, hostname and port area all values from the
//current page that is using cajon. Compare them with
//what is in `url` to make your decision.
}
}
} ) ;
Si vous devez configurer chaque objet XHR avant qu'il envoie sa requête, vous pouvez implémenter une méthode onXhr
qui est appelée après xhr.open(), mais avant que xhr.onreadystatechange() ne soit configuré et avant que xhr.send() ne soit appelé. :
require . config ( {
cajon : {
onXhr : function ( xhr , url ) {
//xhr is the XHMLHttpRequest object.
//url is the URL the xhr object is set to use.
}
}
} ) ;
MIT
Code de conduite de la Fondation jQuery.