Cajon は、CommonJS/node および AMD モジュールをロードできるブラウザ用の JavaScript モジュール ローダーです。これは RequireJS の上に構築されています。
これを使用してプロジェクトのモジュールを CommonJS/node スタイルでコーディングし、RequireJS オプティマイザーを使用してすべてのモジュールを AMD 準拠のバンドルに構築できます。これにより、アーモンドのような小さな AMD API シムを使用して、完全なランタイム ローダーを必要とせずに適切に最適化されたコードを取得できるようになります。
なぜ RequireJS の代わりにこれを使用するのでしょうか?考えられる理由は次のとおりです。
define ( function ( require ) {
/*module code here */
} ) ;
それ以外の場合は、RequireJS または別の AMD ローダーを使用する必要があります。
以下の「制限」セクションに注意してください。言うことを聞かないとイライラして歯ぎしりするかもしれません。
この特定のローダーは好きではないが、デュアル AMD および CommonJS/ノード スタイルのモジュール ローダーのアイデアは気に入っている場合は、LinkedIn の Inject ローダーの方が好きかもしれません。
カホンは次のもので構成されています。
//@ sourceURL=
使用してスクリプト デバッガーのスクリプト名を指定してそれらを評価します。 Cajon は、リクエストが HTML ドキュメントと同じドメインに対するものである場合にのみ、XHR+eval アプローチを使用します。スクリプトリクエストが別のドメイン上にあるとみなされた場合、デフォルトの requirejs.load() 関数に委譲され、そこでスクリプトがタグ付きでロードされ、AMD 形式であることが期待されます。従来の「ブラウザ グローバル」スクリプト。
ユーザーが CORS 対応のブラウザーとサーバーを使用することがわかっている場合は、この動作をオーバーライドして、一部のクロスドメイン要求に XHR を使用できます。以下の「構成」セクションを参照してください。
フェッチされたスクリプトは、次の AMD ラッパーでラップされます。
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
そして、ラップされたコード内で __dirname と __filename を使用できるようになります。
Cajon はcajon
変数をrequirejs
変数と同じに割り当てるため、カホンの使用法を特に呼び出したい場合はそれを使用できます。ただし、 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 モジュールを define() ラップされるように変換する 2.0.2 のcjsTranslate
ビルド オプションを使用するためです。
volo を使用する場合:
volo add cajon
npm を使用する場合:
npm install cajon
または最新リリースの URL:
https://raw.github.com/requirejs/cajon/latest/cajon.js
したがって、 npm install
、その後 cajon を使用してそれを要求できるようにすることは期待しないでください。
ノードはコードを見つけるために複数のnode_modules
パスルックアップを使用しますが、これはブラウザコンテキストで行うのは効率的ではありません。また、多くのノード モジュールはノードの標準ライブラリまたはノードの環境に依存しており、Web ブラウザではデフォルトでは利用できません。
npm でインストールされたコードを使用する必要があり、それがブラウザーで実行されることがわかっている場合は、それを cajon で動作させることができますが、パス、マップ、およびパッケージrequirejs config を使用して動作させる必要がある可能性があります。仕事。
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」がまだその状態になっていない場合、最初の例ではエラーが発生する可能性があります。
2 番目の例は機能しますが、コードを実行する前に 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' ) ;
Cajon はバックグラウンドで requirejs を使用しているだけなので、コールバック スタイルの require プラグインとローダー プラグインの両方を 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.
}
}
} ) ;
マサチューセッツ工科大学
jQuery Foundation の行動規範。