在 symfony2 中使用资产的源映射
Posted
技术标签:
【中文标题】在 symfony2 中使用资产的源映射【英文标题】：source mapping with assetic in symfony2 【发布时间】：2014-08-02 01:40:02 【问题描述】：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
错误：
【问题讨论】：
在其他浏览器中也能用吗？ 目前我无法测试。但它可能不会在任何支持源映射的浏览器中工作，因为路径不正确 没有找到任何解决方案。我尝试将web/js 中的符号链接添加到实际的源映射中，但没有运气。
【参考方案1】：
您的示例的问题在于您将两个来源合并为一个，并且来自两个不同的位置。如果你在你的开发环境中查看生成的脚本标签，你会发现这两条路线是这样的：
<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 控制台命令后，这些脚本应该可以很好地链接到源映射和源文件。
【讨论】：
以上是关于在 symfony2 中使用资产的源映射的主要内容，如果未能解决你的问题，请参考以下文章
在 Symfony2 中使用 Twig 作为 JavaScript 的资产过滤器
如何在 LoginListener 中的 onSecurityInteractiveLogin 方法中重定向 - Symfony2
使用 symfony2 clear cache 命令不刷新静态资产