Cajon은 CommonJS/node 및 AMD 모듈을 로드할 수 있는 브라우저용 JavaScript 모듈 로더입니다. RequireJS를 기반으로 구축되었습니다.
이를 사용하여 CommonJS/node 스타일로 프로젝트 모듈을 코딩한 다음 RequireJS Optimizer를 사용하여 모든 모듈을 AMD 호환 번들로 빌드할 수 있습니다. 이를 통해 아몬드와 같은 작은 AMD API 심을 사용하여 전체 런타임 로더 없이도 훌륭하게 최적화된 코드를 얻을 수 있습니다.
RequireJS 대신 이것을 사용하는 이유는 무엇입니까? 가능한 이유:
define ( function ( require ) {
/*module code here */
} ) ;
그렇지 않으면 RequireJS 또는 다른 AMD 로더를 사용해야 합니다.
아래의 제한사항 섹션을 참고하세요. 주의를 기울이지 않으면 좌절감에 이를 갈게 될 것입니다.
이 특정 로더가 마음에 들지 않지만 듀얼 AMD 및 CommonJS/노드 스타일 모듈 로더 아이디어가 마음에 든다면 LinkedIn의 Inject 로더가 더 좋을 것입니다.
Cajon은 다음과 같이 구성됩니다.
//@ sourceURL=
을 사용하여 스크립트를 평가합니다. Cajon은 요청이 HTML 문서와 동일한 도메인에 대한 경우에만 XHR+eval 접근 방식을 사용합니다. 스크립트 요청이 다른 도메인에 있는 것으로 간주되면 기본 requirejs.load() 함수에 위임하여 태그가 있는 스크립트를 로드하고 AMD 형식이거나 전통적인 "브라우저 전역" 스크립트.
사용자가 CORS 지원 브라우저 및 서버를 사용할 것이라는 것을 알고 있는 경우 일부 도메인 간 요청에 XHR을 사용하도록 이 동작을 재정의할 수 있습니다. 아래 구성 섹션을 참조하세요.
가져온 스크립트는 다음 AMD 래퍼에 래핑됩니다.
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
래핑된 코드 내에서 __dirname 및 __filename을 사용할 수 있습니다.
Cajon은 cajon
변수를 requirejs
변수와 동일하게 할당하므로 cajon의 사용법을 구체적으로 호출하려는 경우 이를 사용할 수 있습니다. 그러나 requirejs 최적화 프로그램은 require
, requirejs
및 define
만 이해하고 cajon
이해하지 못합니다. 이는 최적화 프로그램의 mainConfigFile
옵션을 사용하는 경우 특히 중요합니다.
코드를 RequireJS, 아몬드 및 기타 AMD 로더로 이식하려면 전역 require
사용하고 cajon
감지를 수행하는 것이 가장 좋습니다.
예제 사용을 보여주는 demo
디렉토리가 있지만 기본적으로 태그에 cajon.js를 넣고
require([])
통해 모듈을 로드합니다. 하지만 아래의 제한 사항 섹션을 참고하세요.
데모를 최적화하려면 다음을 실행하세요.
node tools/r.js -o demo/app.build.js
그러면 demo-built
디렉터리에 최적화된 프로젝트가 생성됩니다. 빌드 출력의 모든 모듈은 AMD 스타일로 변환되므로 특별한 CORS 고려 사항 없이 도메인 간 로드가 가능합니다.
app.build.js 빌드 프로필에는 r.js 최적화 프로그램 버전 2.0.2 이상이 필요합니다. 왜냐하면 CommonJS/node 모듈을 빌드에 대해 정의() 래핑되도록 변환하는 2.0.2의 cjsTranslate
빌드 옵션을 사용하기 때문입니다.
볼로를 사용하는 경우:
volo add cajon
npm을 사용하는 경우:
npm install cajon
또는 최신 릴리스의 URL:
https://raw.github.com/requirejs/cajon/latest/cajon.js
따라서 npm install
다음 cajon을 사용하여 요구할 수 있을 것이라고 기대하지 마십시오.
Node는 여러 node_modules
경로 조회를 사용하여 코드를 찾으며 이는 브라우저 컨텍스트에서 수행하는 것이 효율적이지 않습니다. 또한 많은 노드 모듈은 웹 브라우저에서 기본적으로 사용할 수 없는 노드의 표준 라이브러리 또는 노드 환경에 의존합니다.
일부 npm 설치 코드를 사용하고 싶고 브라우저에서 실행된다는 것을 알고 있다면 cajon과 함께 작동하도록 할 수 있지만 이를 가져오려면 paths , map 및 packages requirejs 구성을 사용해야 할 것입니다. 일하다.
CommonJS/노드 모듈 시스템은 동기식 로컬 파일 IO 시스템입니다. 따라서 그들은 다음과 같은 종류의 구성을 허용합니다.
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
첫 번째 예제는 AMD 브라우저 환경에서 실패합니다. 코드가 실행되기 전에 모든 종속성을 알고 다운로드하고 실행해야 하기 때문입니다. 'a'와 'b'가 아직 해당 상태에 있지 않은 경우 첫 번째 예에서는 오류가 발생할 가능성이 높습니다.
두 번째 예는 작동할 수 있지만 해당 코드를 실행하기 전에 AMD 로더가 'a' 및 'b'를 다운로드하고 실행한다는 점을 알고 있어야 합니다.
종속성을 확보하기 위해 런타임 결정을 사용하는 경우 AMD 로더가 지원하는 콜백 스타일 require()를 사용하십시오.
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
또는 결정 논리를 수행할 수 있지만 여전히 단일 문자열 리터럴 종속성으로 처리되는 AMD 로더 플러그인을 만드는 것을 고려해 보십시오.
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
콜백 스타일 require 및 로더 플러그인은 모두 뒤에서 requirejs를 사용하기 때문에 cajon과 함께 사용할 수 있습니다.
Cajon은 요청이 HTML 문서와 동일한 도메인에 대한 경우에만 XHR+eval 접근 방식을 사용합니다. CORS 지원 브라우저 및 서버가 사용된다는 것을 알고 있는 경우 이 동작을 재정의할 수 있습니다.
로더에 전달된 cajon
구성에서 useXhr
함수를 설정합니다.
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.
}
}
} ) ;
요청을 보내기 전에 각 XHR 객체를 구성해야 하는 경우 xhr.open() 이후, xhr.onreadystatechange()가 설정되기 전과 xhr.send()가 호출되기 전에 호출되는 onXhr
메서드를 구현할 수 있습니다. :
require . config ( {
cajon : {
onXhr : function ( xhr , url ) {
//xhr is the XHMLHttpRequest object.
//url is the URL the xhr object is set to use.
}
}
} ) ;
MIT
jQuery 재단 행동 강령.