2013-08-07 1 views
12

をロードしようとしています。Modernizr機能がrequireJSで動的に検出されました。
ModernizrがのAMDをサポートしているため、これは問題ではありません。ModernJのJST構成

マイrequireJS構成はModernizrのソースディレクトリへのパスが含まれており、機能にディレクトリを検出:

requirejs.config({ 
    paths: { 
    "modernizr" : "components/modernizr/src", 
    "feature-detects": "components/modernizr/feature-detects" 
    } 
}); 

SVGテストを必要とする私の意見の一つとさせて頂きます。 define(['Modernizr'], ..
私のビュー定義は、すべての機能が検出され、Modernizrソースファイルは任意のディレクトリを指定せずにModernizrを読み込むので、残念ながらsvg.jsModernizr.jsを見つけることができませんthis

define(["feature-detects/svg"], function() { .. }); 

のように見えるかもしれません。非常に醜いrequire.config

requirejs.config({ 
    paths: { 
    "Modernizr": "components/modernizr/src/Modernizr", 
    "addTest": "components/modernizr/src/addTest", 
    "ModernizrProto": "components/modernizr/src/ModernizrProto", 
    "setClasses": "components/modernizr/src/setClasses", 
    "hasOwnProp": "components/modernizr/src/hasOwnProp", 
    "tests": "components/modernizr/src/tests", 
    "is": "components/modernizr/src/is", 
    "docElement": "components/modernizr/src/docElement", 
    "feature-detects": "components/modernizr/feature-detects" 
    } 
}); 

になり

は、ファイルを見つけることができなかった時はいつでもcomponents/modernizr/src/で検索するrequireJSを伝えるためにクリーンな方法はありますか?

更新

私は、基本的なセットアップと実行demonstrationを含むexample github projectを作成しました。

+0

興味スクリプトの中で定義する使用することができますか?テストを他のページレンダリングよりも前に実行するには、ファイルを同期してロードする必要があります。私が正しく覚えていれば、AMDは主にビルド​​プロセスを支援するために選ばれました。 - https://github.com/Modernizr/Modernizr/issues/713 –

+0

@SimonSmith私は自分のアプリをビルドするためにrequireJS 'r.js'スクリプトを使用していますファイル。 requireJSを使用してModernizr依存関係を定義できるとすばらしいことでしょう。 – jantimon

+0

資産を管理するためにBowerのようなものを使用していると仮定しているので、 'components'フォルダはプロジェクトフォルダと同じではありません(つまり、RequireJSの' baseUrl'をModernizerを指すように使うことはできません)。残念ながら、これらの依存関係を簡単に追加する方法はなく、解決方法も唯一の選択肢です。代わりに、Modernizerで 'r.js'を実行し、パッケージ化したファイルをあなたのアプリに含めます。それでも素晴らしいことはありません。 – danielepolencic

答えて

19

ModernizrのAMD構造は、(現在)独自の内部ビルドプロセス用です。私たちはあなたが試したように使用できるようにこれを公開することについて議論しましたが、まだこれを行う便利な方法に同意していません。 A Modernizr plugin for RequireJSは1つのオプションです。

あなたはBowerを使用していますか?もしそうなら、Modernizr isn't suitable for use with Bower yetに注目する価値があります。

現時点でModernizrをビルドプロセスに結びつけるには、grunt-modernizrを使用することをお勧めします。これは自動的にModernizrの参照をコード内で見つけます(または明示的に定義することもできます)。次に、Modernizrビルドあなたがそれを必要なときに、他のAMD依存関係のように:

define(['path/to/built/modernizr.js'], function (Modernizr) { 
    if (Modernizr.svg) { 
     ... 
    } 
}); 
+0

ありがとう!これが今の唯一の方法であれば、私はハラハラに切り替えるでしょう。 – jantimon

+0

私はすでにModernizrのカスタムビルド(Zurb Foundationで入手済み)を持っていれば、どのようにAMDをサポートしていますか?モジュールのdefine()は表示されません。最初の行には、ウィンドウにグローバル変数が添付されています。あなたは精緻化できますか? – elanh

+3

@elanh ModernizrスクリプトはAMDと互換性がないので、[shim config](http://requirejs.org/docs/api.html#config-shim)を使用してください。 –

-1

私が正しくあなたの質問を理解していれば、あなただけのようにのようなあなたの機能を定義しています:

define([ 
    "modernizr", 
    "feature-detects/svg" 
], function(Modernizr) { 
    Modernizr.addTest(); 
}); 

modernizrがあなたの特徴検出コードを実行する前にロードされます。この道を。

+0

すべての依存関係を持つ機能検出をロードしたい – jantimon

11

私の提案は

コンフィグ

paths: { 
     'Modernizr': 'PATH TO MODERNIZR' 
    } 
shim: { 
     'Modernizr': { 
      exports: 'Modernizr' 
     } 
    } 
シムを持っているだろう

=================

あなたはModernizrでAMDを使用する理由のよう

define(['Modernizr'],function(Modernizr) { 
    'use strict'; 

console.log(Modernizr) 
// This should log the Modernizr function 

//For Example 
if(Modernizr.boxshadow){ 
    // Do something here 
} 

};