Cajon es un cargador de módulos JavaScript para el navegador que puede cargar módulos CommonJS/node y AMD. Está construido sobre RequireJS.
Puede usarlo para codificar módulos para su proyecto en estilo CommonJS/nodo, luego usar RequireJS Optimizer para construir todos los módulos en un paquete compatible con AMD. Esto le permite luego usar una pequeña corrección de API de AMD, como Almond, para obtener un código bien optimizado sin necesidad de un cargador de tiempo de ejecución completo.
¿Por qué utilizar esto en lugar de RequireJS? Algunas posibles razones:
define ( function ( require ) {
/*module code here */
} ) ;
De lo contrario, debería utilizar RequireJS u otro cargador AMD.
Tenga en cuenta la sección Restricciones a continuación. Probablemente rechinará los dientes de frustración si no les presta atención.
Si no le gusta este cargador en particular, pero le gusta la idea de un cargador de módulo dual AMD y CommonJS/estilo de nodo, entonces puede que le guste más el cargador Inject de LinkedIn.
Cajón está construido con:
//@ sourceURL=
para especificar los nombres de las secuencias de comandos para los depuradores de secuencias de comandos. Cajon solo utilizará el enfoque XHR+eval si la solicitud es al mismo dominio que el documento HTML. Si se considera que la solicitud del script está en otro dominio, simplemente la delegará a la función requirejs.load() predeterminada, donde cargará el script con una etiqueta y esperará que esté en formato AMD o en formato AMD. script tradicional de "navegadores globales".
Puede anular este comportamiento para utilizar XHR para algunas solicitudes entre dominios si sabe que sus usuarios utilizarán navegadores y servidores habilitados para CORS. Consulte la sección Configuración a continuación.
Los scripts que se obtienen se empaquetan en el siguiente contenedor AMD:
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
y permite el uso de __dirname y __filename dentro de ese código empaquetado.
Cajon asigna la variable cajon
para que sea la misma que la variable requirejs
, por lo que puede usarla si desea mencionar específicamente el uso de cajón. Sin embargo, el optimizador de requirejs solo entiende require
, requirejs
y define
, no entenderá cajon
. Esto es particularmente importante si está utilizando la opción mainConfigFile
del optimizador.
Es mejor usar el require
global si desea que el código sea portátil para RequireJS, Almond y otros cargadores AMD, y solo detectar el cajon
si desea saber si el cajón está disponible.
Hay un directorio demo
que muestra un ejemplo de uso, pero básicamente, coloque cajon.js en una etiqueta y cargue los módulos mediante
require([])
. Sin embargo, tenga en cuenta la sección Restricciones a continuación.
Para optimizar la demostración, ejecute:
node tools/r.js -o demo/app.build.js
Esto generará el proyecto optimizado en un directorio demo-built
. Todos los módulos en el resultado de la compilación se habrán convertido al estilo AMD, de modo que puedan cargarse entre dominios sin necesidad de consideraciones especiales de CORS.
El perfil de compilación app.build.js requiere que el optimizador r.js sea la versión 2.0.2 o posterior, porque utiliza la opción de compilación cjsTranslate
de 2.0.2 que convierte los módulos CommonJS/node para que estén empaquetados en define() para la compilación.
Si usa volo:
volo add cajon
Si usa npm:
npm install cajon
O URL a la última versión:
https://raw.github.com/requirejs/cajon/latest/cajon.js
Por lo tanto, no espere que npm install
algún código y luego pueda solicitarlo usando cajón.
Node utiliza múltiples búsquedas de rutas node_modules
para encontrar código y esto no es eficiente en el contexto de un navegador. Además, muchos módulos de nodo dependen de la biblioteca estándar de nodo o del entorno de Nodo, que no están disponibles de forma predeterminada en el navegador web.
Si desea utilizar algún código instalado por npm y sabe que se ejecutará en el navegador, puede hacer que funcione con cajon, pero probablemente necesitará usar las rutas , el mapa y la configuración de requirejs para obtenerlo. trabajar.
Los sistemas de módulos CommonJS/node son sistemas IO de archivos locales sincrónicos. Entonces permiten este tipo de construcciones:
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
El primer ejemplo fallará en un entorno de navegador AMD, ya que todas las dependencias deben conocerse, descargarse y ejecutarse antes de ejecutar el código. Si 'a' y 'b' aún no están en ese estado, ese primer ejemplo probablemente generará un error.
El segundo ejemplo puede funcionar, pero sepa que el cargador de AMD descargará y ejecutará 'a' y 'b' antes de ejecutar ese código.
Si usa una decisión de tiempo de ejecución para tomar una dependencia, use el estilo de devolución de llamada require() compatible con los cargadores AMD:
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
O considere crear un complemento de carga AMD que pueda realizar la lógica de decisión pero aún así ser tratado como una dependencia literal de una sola cadena:
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
Tanto los complementos de carga como de estilo de devolución de llamada se pueden usar con cajón, ya que solo usa requirejs detrás de escena.
Cajon solo utilizará el enfoque XHR+eval si la solicitud es al mismo dominio que el documento HTML. Puede anular este comportamiento si sabe que se utilizarán navegadores y servidores habilitados para CORS.
Configure una función useXhr
en una configuración cajon
pasada al cargador:
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 necesita configurar cada objeto XHR antes de que envíe su solicitud, puede implementar un método onXhr
que se llama después de xhr.open(), pero antes de que se configure xhr.onreadystatechange() y antes de que se llame a xhr.send() :
require . config ( {
cajon : {
onXhr : function ( xhr , url ) {
//xhr is the XHMLHttpRequest object.
//url is the URL the xhr object is set to use.
}
}
} ) ;
MIT
Código de conducta de la Fundación jQuery.