2013-08-07 20 views
12

Modernizr özelliği, gerektiren JES ile dinamik olarak algılamaya çalışıyorum.
Modernizr, AMD desteğine sahip olduğu için bu bir sorun olmamalı.Modernizr için JS yapılandırması gerekiyor

Benim requireJS yapılandırma Modernizr kaynak dizinine yolları içerir ve özelliği dizin algılar:

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

svg testini gerektirecektir benim görünümlerinden birini varsayalım. define(['Modernizr'], ..: tümünde algılar ve Modernizr kaynak dosyaları herhangi bir dizin belirtmeden Modernizr yüklenmesidir this

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

Maalesef svg.jsModernizr.js bulamıyorlar
Bence tanım görünebilir. sonuçlanan

çok çirkin 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" 
    } 
}); 

dosyayı bulamadı zaman components/modernizr/src/ arama yapmanın requireJS anlatmak için daha temiz bir yolu var mı?

Güncelleme temel kurulum ve demonstration çalışan içeren bir example github project yarattı. Sorunuzu doğru anlamak

+0

Meraklı Betiğinizde tanımlamak kullanabilir? Senkronize olarak yüklenecek dosyaya gereksiniminiz vardır, böylece sınamalar sayfanın geri kalanı yüklenmeden önce çalışır. Doğru olarak hatırlarsam, AMD öncelikle oluşturma işlemine yardımcı olmak için seçildi - https://github.com/Modernizr/Modernizr/issues/713 –

+0

@SimonSmith Uygulamamı tek bir uygulamaya oluşturmak için requireJS 'r.js' komut dosyasını kullanıyorum dosya. RequireJS kullanarak modernizr bağımlılıkları tanımlayabilirsem harika olurdu. – jantimon

+0

Varlıkları yönetmek için Bower gibi bir şey kullandığınızı varsayarsınız, bu nedenle, 'components' klasörünüz proje klasörü ile aynı değildir (başka bir deyişle, modernleştiriciyi işaretlemek için RequireJS'deki 'baseUrl'yi kullanamazsınız). Ne yazık ki, bu bağımlılıkları eklemenin kolay bir yolu yok gibi görünüyor ve çözdüğünüz gibi tek seçenek. Alternatif, Modernizörde "r.js" yi çalıştırıyor ve ardından paketlenmiş dosyayı uygulamanıza dahil ediyordu. Hala harika değil. – danielepolencic

cevap

19

Modernizr'in AMD yapısı (şu anda) sadece kendi dahili oluşturma işlemidir. Bunu açığa çıkarmayı tartıştık, böylece denediğiniz gibi kullanılabilir, ancak henüz bunu yapmak için uygun bir yol üzerinde anlaşmamışsınız. A Modernizr plugin for RequireJS bir seçenek olabilir.

Bower kullanıyor musunuz? Eğer öyleyse, Modernizr isn't suitable for use with Bower yet dikkat edin.

Modernizr'i şu anki oluşturma işleminize bağlamak için önerilen yöntem, kodunuzda Modernizr algılarını otomatik olarak bulabileceğiniz (veya bunları açıkça tanımlayabileceğiniz) grunt-modernizr kullanıyor, daha sonra ortaya çıkan Modernizr derlemesini kullanabilirsiniz. başka AMD bağımlılık gibi her ihtiyacınız:

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

Çok teşekkür ederim! Şimdiye kadar tek yol buysa, homurdanmaya geçeceğim. – jantimon

+0

Özel bir Modernizr yapısına sahipseniz (bunu Zurb Foundation ile aldım), AMD'yi nasıl destekliyor? Modül için herhangi bir define() göremiyorum. İlk satırda pencereye bağlı bir global değişken olduğunu görüyorum. Detaylandırır mısın? – elanh

+3

@elanh Yapılandırılmış bir Modernizr betiği AMD uyumlu değildir, bu yüzden bir [shim config] kullanmalısınız (http://requirejs.org/docs/api.html#config-shim). –

-1

, sadece şöyle Özelliğinizi tanımlamak olmaz: Lütfen özellik algılama kodu dolmadan

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

Bu şekilde modernizr yüklenecektir.

+0

Tüm özellikleriyle bir özellik tespit etmek istiyorum – jantimon

11

Benim önerim bir Shim

paths: { 
     'Modernizr': 'PATH TO MODERNIZR' 
    } 
shim: { 
     'Modernizr': { 
      exports: 'Modernizr' 
     } 
    } 
Config'i sahip olacaktır

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

Sen Modernizr ile AMD kullanarak nedeni olarak

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

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

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

}; 
İlgili konular