Сопоставление источников с усложнением в symfony2

есть эта классная функция Source Maps в html5. В моем проекте Symfony2 я использую jQuery mobile, который использует эту функцию (я использую BmatznerJQueryMobileBundle для интеграции).

В моем <head> я делаю следующее:

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

Это отлично работает для js файлов, но Chrome получает ошибку 404, пытающуюся получить исходный файл сопоставления. Кто-нибудь знает, как это решить?

Отображение источника в файле jquery.mobile.min.js выглядит так и находится в том же каталоге.

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

Ошибка:

404 in chrome

Ответ 1

Проблема с вашим примером заключается в том, что вы объединяете два источника в один и из двух разных мест. Если вы посмотрите на сгенерированные теги script в своей среде dev, вы увидите, что эти два маршрута похожи на:

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

Assetic не создает соответствующие маршруты для исходных карт, поэтому эти файлы теперь имеют недопустимые значения sourceMappingURL - следовательно, ваши 404.

Одним из решений является экспорт исходных карт (и источников) в местоположение относительно динамических маршрутов с использованием конфигурации assetic.assets:

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

например. 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

Это обеспечит поражение sourceMappingURL, но это немного беспорядок, имеющий все это отдельно от вашего кода шаблона.

Если вы можете жить с двумя отдельными активами на своем производственном сайте, гораздо более простое решение состоит в том, чтобы просто ссылаться на два актива отдельно, например.

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

После запуска консольной команды assets:install эти сценарии должны быть связаны только с исходными и исходными файлами.