[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope

プレフィックス（接頭辞）を使用して、ロードのタイミング、UAごとに必要なファイルだけをロードなど、条件付きでファイルをロードさせることができるスクリプトローダーを紹介します。

yepnope.js -A Conditional Loader For Your Polyfills!

[ad#ad-2]

yepnope.jsの書式

yepnope.jsの基本書式は、下記のようになります。

yepnope(resources /* string | object | array */ [, $LABchain])

css!

プレフィックス「css!」を使用して、指定したファイルをCSSファイルとしてロードします。
※「.css」で終了していない名前はJavaScriptファイルとして認識されます。
例：cachebusted.css?version=1452318

yepnope({
  load : ['normal.css', 'css!cachebusted.css?version=1452318']
});

wait!

プレフィックス「wait!」を使用して、指定したファイル（a.js）の後にファイルをロードします。

yepnope([{
  load : ['wait!a.js', 'needs-a.js']
}]);

[ad#ad-2]

ie6!

プレフィックス「ie6!」を使用して、IE6のみファイル（ie-patch.js）をロードします。

yepnope([{
  load: ['normal.js', 'ie6!ie-patch.js']
}]);

IE用のプレフィックスは、下記のものが用意されています。

• ie
• ie5
• ie6
• ie7
• ie8
• ie9
• iegt5
• iegt6
• iegt7
• iegt8
• ielt7
• ielt8
• ielt9

プレフィックスは繋げて使用することも可能です。
IE6, IE7のみファイルをロードする場合は、下記のようになります。

yepnope([{
  load: ['normal.js', 'ie6!ie7!ie-patch.js']
}]);

プレフィックスはカスタマイズすることも可能で、下記の書式になります。

yepnope.addPrefix(prefix /* string */, resourceHandler(resourceObj) /* function */)