Source Mapping mit Assetic in Symfony2

gibt es dieses coole Feature Source Maps in html5. In meinem Symfony2-Projekt verwende ich jQuery mobile, das diese Funktion verwendet (ich verwende die BMatznerJQueryMobileBundle für die Integration).Source Mapping mit Assetic in Symfony2

In meinem <head> ich tue folgendes:

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

Dies funktioniert gut für die js Dateien, aber Chrome bekommt einen 404-Fehler versuchen, die Quelle maping Datei zu erhalten. Weiß jemand, wie man das löst?

Die Quellzuordnung in der Datei jquery.mobile.min.js sieht so aus und befindet sich ebenfalls im selben Verzeichnis.

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

Fehler:

404 in chrome

Quelle

2014-06-11 Tuxes3

funktioniert es in anderen Browsern? –

Derzeit kann ich nicht testen. Aber wahrscheinlich funktioniert es in keinem Browser, der Quellkarten unterstützt, da der Pfad nicht korrekt ist. – Tuxes3

Keine Lösung gefunden. Ich habe versucht, einen Symlink in 'web/js' zur eigentlichen Quellkarte hinzuzufügen, hatte aber kein Glück. –

Das Problem mit Ihrem Beispiel ist, dass Sie zwei Quellen in eine kombinieren, und von zwei verschiedenen Standorten. Wenn Sie an den generierten Script-Tags in Ihrer dev Umgebung anschauen, werden Sie sehen, dass die beiden Routen sind so etwas wie:

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

Assetic schafft keine Routen für Kartengrund passend, so dass nun diese Dateien haben ungültige Werte sourceMappingURL - damit Ihre 404.

eine Lösung ist die Quelle Karten (und Quellen) zu einer Position in Bezug auf die dynamischen Routen mit der assetic.assets Konfiguration zu exportieren:

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

z.B. 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

Dadurch wird sichergestellt, das sourceMappingURL getroffen wird, aber es ist ein bisschen ein Durcheinander dieses separat alle aus Ihrer Vorlage Code.

Wenn Sie mit zwei separaten Assets in Ihrer Produktionsstätte leben können, ist es eine viel einfachere Lösung, die beiden Assets einzeln zu referenzieren, z.

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

Nach dem assets:install Konsolenbefehl ausgeführt wird, sollte dieser Scripts Link auf die Quelle Karten und Quelldateien einfach gut.

Quelle

2014-08-19 23:19:03 Tim

Antwort

Verwandte Themen