在
html5中有这个很酷的功能源地图.在我的Symfony2项目中,我使用了使用这个功能的jQuery mobile(我使用Bmatzner
JQueryMobileBundle进行集成).
在我的< 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
错误：
解决方法
您的示例的问题是您将两个来源组合成一个,并从两个不同的位置组合.如果您在开发环境中查看生成的脚本标签,您会看到两条路由如下所示：
<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>
