html5 中有一个很酷的特性 Source Maps。在我的 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 文件中的 Source Mapping 如下所示，并且也在同一目录中。
//# sourceMappingURL=jquery.mobile-1.4.2.min.map
错误:
最佳答案
您的示例的问题在于您将来自两个不同位置的两个源合并为一个。如果您在开发环境中查看生成的脚本标签，您会发现这两条路线类似于:
<script src="/js/ed5a632_jquery.min_1.js"></script>
<script src="/js/ed5a632_jquery.mobile.min_2.js"></script>
Assetic 不会为源映射创建匹配的路由，因此这些文件现在具有无效的 sourceMappingURL 值 - 因此是您的 404。
一种解决方案是使用 assetic.assets 配置将源映射(和源)导出到相对于动态路由的位置:
引用:https://github.com/symfony/symfony/pull/848
例如配置.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 被命中，但是将所有这些与您的模板代码分开有点困惑。
如果您可以在您的生产站点中使用两个独立的 Assets ，一个更简单的解决方案是单独引用这两个 Assets ，例如
<script src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
<script src="{{ asset('bundles/bmatznerjquerymobile/js/jquery.mobile.min.js') }}"></script>
运行 assets:install 控制台命令后，这些脚本应该可以很好地链接到源映射和源文件。
关于javascript - 在 symfony2 中使用 assetic 进行源映射，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24172391/