2013-08-07 12 views
12

Próbuję załadować modernizr funkcję wykrywa dynamicznie requireJS.
Jako że Modernizr ma wbudowaną obsługę AMD, nie powinno to stanowić problemu.
requireJS dla modernizr

Moja konfiguracja requireJS zawiera ścieżkę do katalogu źródłowego modernizr i funkcji wykrywa katalogu:

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

Załóżmy jeden z moich poglądów wymagałyby svg test.
Moja definicja widoku może wyglądać this

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

svg.js Niestety nie można znaleźć Modernizr.js ponieważ wszyscy funkcja wykrywa i pliki źródłowe modernizr załadować modernizr bez określania dowolny katalog: define(['Modernizr'], ...

co skutkuje bardzo brzydki 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" 
    } 
}); 

Czy istnieje przejrzysty sposób powiedzieć requireJS szukać w components/modernizr/src/ gdy nie mógł znaleźć plik?

Aktualizacja

I stworzył example github project która obejmuje podstawową konfigurację i uruchomiony demonstration.

+0

ciekaw, przyczyny zastosowania AMD z modernizr? Musisz ładować plik synchronicznie, aby testy zostały wykonane przed renderowaniem reszty strony. Jeśli dobrze pamiętam, AMD został przede wszystkim wybrany do pomocy w procesie budowania - https://github.com/Modernizr/Modernizr/issues/713 –

+0

@SimonSmith Korzystam ze skryptu requireJS 'r.js' do zbudowania mojej aplikacji w jeden plik. Byłoby wspaniale, gdybym mógł zdefiniować zależności moderatora za pomocą requireJS. – jantimon

+0

Zakładam, że używasz czegoś podobnego do Bower do zarządzania zasobami, dlatego folder 'components' nie jest tym samym co folder projektu (innymi słowy, nie możesz użyć' baseUrl' w RequireJS, aby wskazywać na Modernizer). Niestety wydaje się, że nie ma prostego sposobu na dodanie tych zależności, a sposób, w jaki to rozwiązałeś, jest jedyną opcją. Alternatywą byłoby uruchomienie 'r.js' na Modernizerze, a następnie włączenie do aplikacji spakowanego pliku. Wciąż nie świetne. – danielepolencic

Odpowiedz

19

Struktura AMD Modernizera jest (obecnie) tylko dla własnego wewnętrznego procesu budowy. Omówiliśmy wystawienie tego, aby można go było wykorzystać tak, jak już próbowaliśmy, ale nie uzgodniliśmy jeszcze dogodnego sposobu, aby to zrobić. A Modernizr plugin for RequireJS może być jedną z opcji.

Czy używasz Altana? Jeśli tak, warto zwrócić uwagę na Modernizr isn't suitable for use with Bower yet.

Zalecanym sposobem powiązania Modernizr z procesem kompilacji jest użycie grunt-modernizr, który automatycznie odnajdzie w kodzie odnośniki do wykrytych przez program Modernizr (lub możesz je jawnie zdefiniować), następnie możesz po prostu użyć wynikowej kompilacji Modernizr jak każde inne uzależnienie AMD, kiedy trzeba go:

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

Dziękuję bardzo! Jeśli to jedyny sposób, przejdę teraz do chrząkania. – jantimon

+0

Jeśli mam już niestandardową kompilację Modernizr (otrzymałem ją za pomocą Zurb Foundation), w jaki sposób obsługuje ona AMD? Nie widzę żadnego define() dla modułu. Widzę, że w pierwszej linii jest dołączona zmienna globalna. Czy możesz rozwinąć? – elanh

+3

@elanh Zbudowany skrypt Modernizr nie jest zgodny z AMD, więc powinieneś użyć [shim config] (http://requirejs.org/docs/api.html#config-shim). –

-1

Jeśli dobrze rozumiem Twoje pytanie, nie wystarczy zdefiniować funkcję tak:

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

ten sposób modernizr zostanie załadowany przed Twój kod działa funkcja wykrywania.

+0

Chcę załadować wykrywanie funkcji wraz ze wszystkimi jego zależnościami – jantimon

11

Moja sugestia byłoby mieć podkładkę

Config

paths: { 
     'Modernizr': 'PATH TO MODERNIZR' 
    } 
shim: { 
     'Modernizr': { 
      exports: 'Modernizr' 
     } 
    } 

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

Można użyć określić w skrypcie

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

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

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

};