2014-06-11 24 views
10

kaynak harita html5 Kaynak Haritalar bu harika özelliği var. Symfony2 projemde bu özelliği kullanan jQuery mobile kullanıyorum (Entegrasyon için BmatznerJQueryMobileBundle kullanıyorum). benim <head> i aşağıdakileri yapın yılındakaynak haritalama ile birlikte

:

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

Bu js dosyaları için çalışıyor, ancak Chrome kaynak haritalama dosyasını almaya çalışırken bir 404 hatası alır. Bunu nasıl çözeceğini bilen var mı?

jquery.mobile.min.js dosyasında Kaynak Haritalama şeklinde görünür ve aynı dizinde aynı zamanda.

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

hatası:

404 in chrome

+0

diğer tarayıcılarda çalışır? –

+0

Şu anda test edemiyorum. Ama muhtemelen yolunu herhangi bir çözüm bulamadı – Tuxes3

+0

doğru değil gibi kaynak haritalar destekleyen herhangi bir tarayıcıda işe alışkanlık. Ben gerçek kaynak haritaya web/js' 'bir sembolik eklemek çalıştı, ama hayır şans vardı. –

cevap

4

sizin örnek ile sorun birine iki kaynağı birleştirerek ve iki farklı yerlerden olmasıdır. Eğer dev ortamında oluşturulan komut dosyası etiketleri bakmak, iki yolları olduğunu görürsünüz gibi bir şey:

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

Assetic kaynak haritaları için yolları eşleşen yaratmaz, böylece bu dosyalar artık geçersiz sourceMappingURL değerlere sahip

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

- dolayısıyla da 404.

bir çözüm assetic.assets yapılandırmayı kullanarak dinamik yolları bir konum göreli kaynak haritalar (ve kaynakları) ihraç etmektir

, ör. 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 

Bu sourceMappingURL isabet sağlayacaktır, ancak şablon kodunun tüm bu ayrı olan bir dağınıklık biraz bu.

üretim sitenizde iki ayrı varlıklar ile yaşayabilir, çok daha basit bir çözüm sadece örneğin bireysel olarak iki öğelere gönderme etmektir

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

assets:install konsol komutunu çalıştırdıktan sonra, bu komut dosyaları kaynak haritaları ve kaynak dosyalara sadece iyi bağlanmalıdır.