在symfony2中使用assetic进行源映射
Tux*_*es3 10 javascript jquery html5 symfony assetic
在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在尝试获取源maping文件时出现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
例如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控制台命令后,这些脚本应该很好地链接到源映射和源文件.