symfony2中使用Assetic进行源映射 [英] source mapping with assetic in symfony2
问题描述
html5中有一个很酷的功能Source Maps.在我的Symfony2项目中，我使用了使用此功能的jQuery mobile(我使用BmatznerJQueryMobileBundle进行集成).
there is this cool feature Source Maps in html5. In my Symfony2 project I use jQuery mobile which uses this feature (I use the BmatznerJQueryMobileBundle for integration).
在我的< head> 中，我执行以下操作:
In my <head> i do following:
{% 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错误.有人知道如何解决这个问题吗?
This works fine for the js files, but Chrome gets an 404 error trying to get the source maping file. Does anybody know how to solve this?
jquery.mobile.min.js文件中的源映射"看起来像这样，并且也位于同一目录中.
The Source Mapping in the jquery.mobile.min.js file looks like this and is also in the same directory.
//# sourceMappingURL=jquery.mobile-1.4.2.min.map
错误:
推荐答案
您的示例的问题在于，您要将两个来源合并为一个来源，并且来自两个不同的位置.如果在您的开发环境中查看生成的脚本标签，您会看到两条路线类似:
The problem with your example is that you are combining two sources into one, and from two different locations. If you look at the generated script tags in your dev environment, you'll see that the two routes are something like:
<script src="/js/ed5a632_jquery.min_1.js"></script>
<script src="/js/ed5a632_jquery.mobile.min_2.js"></script>
Assetic不会为源地图创建匹配的路线，因此这些文件现在具有无效的 sourceMappingURL 值-因此您的404.
Assetic does not create matching routes for source maps, so these files now have invalid sourceMappingURL values - hence your 404.
一种解决方案是使用 assetic.assets 配置将源地图(和源)导出到相对于动态路线的位置:
One solution is to export the source maps (and sources) to a location relative to the dynamic routes using the assetic.assets configuration:
ref: https://github.com/symfony/symfony/pull/848
例如config.yml
e.g. 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被命中，但是将所有这些与模板代码分开会有些混乱.
This will ensure the sourceMappingURL is hit, but it's a bit of a mess having all this separate from your template code.
如果您可以在生产现场中使用两个单独的资产，那么一个更简单的解决方案是仅分别引用这两个资产，例如
If you can live with two separate assets in your production site, a much simpler solution is to just reference the two assets individually, e.g.
<script src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
<script src="{{ asset('bundles/bmatznerjquerymobile/js/jquery.mobile.min.js') }}"></script>
运行 assets:install 控制台命令后，这些脚本应该可以很好地链接到源映射和源文件.
After running the assets:install console command, these scripts should link just fine to the source maps and source files.
这篇关于symfony2中使用Assetic进行源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
