2014-06-11 11 views
10

c'è questa fantastica funzione Mappe di origine in html5. Nel mio progetto Symfony2 uso jQuery mobile che usa questa funzione (io uso BmatznerJQueryMobileBundle per l'integrazione).mapping di origine con assetic in symfony2

Nel mio <head> I do seguente:

{% javascripts 
    '@BmatznerJQueryBundle/Resources/public/js/jquery.min.js' 
    '@BmatznerJQueryMobileBundle/Resources/public/js/jquery.mobile.min.js' 
%} 
    <script src="{{ asset_url }}"></script> 
{% endjavascripts %} 

Questo funziona bene per i file JS, ma Chrome ottiene un errore 404 cercando di ottenere il file di origine Maping. Qualcuno sa come risolvere questo?

Il mapping di origine nel file jquery.mobile.min.js è simile a questo ed è anche nella stessa directory.

//# sourceMappingURL=jquery.mobile-1.4.2.min.map 

errore:

404 in chrome

+0

funziona in altri browser? –

+0

Attualmente non riesco a testare. Ma probabilmente non funzionerà con nessun browser che supporti le mappe sorgente in quanto il percorso non è corretto – Tuxes3

+0

Non ho trovato alcuna soluzione. Ho provato ad aggiungere un link simbolico in 'web/js' alla mappa sorgente reale, ma non ho avuto fortuna. –

risposta

4

Il problema con il vostro esempio è che si sta unendo due sorgenti in un unico, e da due posizioni diverse. Se si guardano le tag di script generati nell'ambiente dev, vedrete che i due percorsi sono qualcosa come:

<script src="/js/ed5a632_jquery.min_1.js"></script> 
<script src="/js/ed5a632_jquery.mobile.min_2.js"></script> 

Assetic non creare percorsi per mappe di origine corrispondenti, in modo che questi file hanno ora non validi sourceMappingURL valori - da qui la tua 404.

una soluzione è quella di esportare mappe di origine (e fonti) per una posizione relativa ai percorsi dinamici utilizzando la configurazione assetic.assets:

ref: https://github.com/symfony/symfony/pull/848

ad es. config.yml

assetic: 
    assets: 
    map1: 
     input: "%kernel.root_dir%/../src/path/to/jquery.min.map" 
     output: js/jquery.min.map 
    src1: 
     input: "%kernel.root_dir%/../src/path/to/jquery.js" 
     output: js/jquery.js 

Ciò garantirà la sourceMappingURL viene colpito, ma è un po 'di confusione avere tutto questo separato dal codice del modello.

Se è possibile vivere con due risorse separate nel proprio sito di produzione, una soluzione molto più semplice è semplicemente fare riferimento alle due risorse singolarmente, ad es.

<script src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script> 
<script src="{{ asset('bundles/bmatznerjquerymobile/js/jquery.mobile.min.js') }}"></script> 

Dopo aver eseguito il comando assets:install console, questi script dovrebbero collegare bene alle mappe di origine ei file di origine.