Cajon é um carregador de módulo JavaScript para o navegador que pode carregar módulos CommonJS/node e AMD. Ele é construído sobre RequireJS.
Você pode usá-lo para codificar módulos para seu projeto no estilo CommonJS/node e, em seguida, usar o RequireJS Optimizer para criar todos os módulos em um pacote compatível com AMD. Isso permite que você use um pequeno shim da API AMD, como o amêndoa, para obter um código bem otimizado sem a necessidade de um carregador de tempo de execução completo.
Por que usar isso em vez de RequireJS? Algumas razões possíveis:
define ( function ( require ) {
/*module code here */
} ) ;
Caso contrário, você deve usar RequireJS ou outro carregador AMD.
Observe a seção Restrições abaixo. Você provavelmente rangerá os dentes de frustração se não prestar atenção a eles.
Se você não gosta deste carregador específico, mas gosta da ideia de um carregador de módulo duplo estilo AMD e CommonJS/node, então você pode gostar mais do carregador Inject do LinkedIn.
Cajon é construído com:
//@ sourceURL=
para especificar os nomes de script para depuradores de script. Cajon só usará a abordagem XHR+eval se a solicitação for para o mesmo domínio do documento HTML. Se a solicitação de script for considerada em outro domínio, ele apenas delegará para a função requirejs.load() padrão, onde carregará o script com uma tag e esperará que esteja no formato AMD, ou um script tradicional de "navegador global".
Você pode substituir esse comportamento para usar XHR para algumas solicitações entre domínios se souber que seus usuários usarão navegadores e servidores habilitados para CORS. Consulte a seção Configuração abaixo.
Os scripts buscados são agrupados no seguinte wrapper AMD:
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
e permite o uso de __dirname e __filename dentro desse código empacotado.
Cajon atribui a variável cajon
ao mesmo que a variável requirejs
, então você pode usá-la se quiser chamar especificamente o uso de cajon. Porém, o otimizador requirejs entende apenas require
, requirejs
e define
, ele não entenderá cajon
. Isto é particularmente importante se você estiver usando a opção mainConfigFile
do otimizador.
É melhor usar apenas o require
global se quiser que o código seja portável para RequireJS, amêndoa e outros carregadores AMD, e só fazer a detecção do cajon
se quiser saber se o cajon está disponível.
Existe um diretório demo
que mostra exemplos de uso, mas basicamente, coloque cajon.js em uma tag e carregue os módulos via
require([])
. Observe a seção Restrições abaixo.
Para otimizar a demonstração, execute:
node tools/r.js -o demo/app.build.js
Isso irá gerar o projeto otimizado em um diretório demo-built
. Todos os módulos na saída do build terão sido convertidos para o estilo AMD, para que possam ser carregados entre domínios sem a necessidade de considerações especiais de CORS.
O perfil de compilação app.build.js requer que o otimizador r.js seja a versão 2.0.2 ou posterior, porque ele usa a opção de compilação cjsTranslate
do 2.0.2 que converte módulos CommonJS/node para serem encapsulados em define() para a compilação.
Se estiver usando volo:
volo add cajon
Se estiver usando npm:
npm install cajon
Ou URL para a versão mais recente:
https://raw.github.com/requirejs/cajon/latest/cajon.js
Portanto, não espere que npm install
algum código e possa solicitá-lo usando o cajon.
O Node usa várias pesquisas de caminho node_modules
para encontrar código e isso não é eficiente em um contexto de navegador. Além disso, muitos módulos do nó dependem da biblioteca padrão do nó ou do ambiente do nó, que não estão disponíveis por padrão no navegador da web.
Se você quiser usar algum código instalado pelo npm e sabe que ele será executado no navegador, você pode fazê-lo funcionar com o cajon, mas provavelmente precisará usar a configuração paths , map e packages requirejs para fazê-lo trabalhar.
Os sistemas de módulos CommonJS/node são sistemas IO de arquivos locais síncronos. Então, eles permitem estes tipos de construções:
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
O primeiro exemplo falhará em um ambiente de navegador AMD, pois todas as dependências precisam ser conhecidas, baixadas e executadas antes da execução do código. Se 'a' e 'b' ainda não estiverem nesse estado, o primeiro exemplo provavelmente gerará um erro.
O segundo exemplo pode funcionar, mas saiba que o carregador AMD irá baixar e executar 'a' e 'b' antes de executar esse código.
Se você usar uma decisão de tempo de execução para obter uma dependência, use o estilo de retorno require() suportado pelos carregadores AMD:
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
Ou considere criar um plugin de carregamento AMD que possa fazer a lógica de decisão, mas ainda assim ser tratado como uma dependência literal de string única:
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
Os plug-ins require e loader de estilo de retorno de chamada podem ser usados com cajon, pois ele usa apenas requirejs nos bastidores.
Cajon só usará a abordagem XHR+eval se a solicitação for para o mesmo domínio do documento HTML. Você pode substituir esse comportamento se souber que navegadores e servidores habilitados para CORS serão usados.
Configure uma função useXhr
em uma configuração cajon
passada para o carregador:
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.
}
}
} ) ;
Se você precisar configurar cada objeto XHR antes de enviar sua solicitação, você pode implementar um método onXhr
que é chamado depois de xhr.open(), mas antes de xhr.onreadystatechange() ser configurado e antes de xhr.send() ser chamado :
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 Conduta da Fundação jQuery.