在 symfony2 中使用资产的源映射答案

【问题标题】：source mapping with assetic in symfony2在 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 中的符号链接添加到实际的源映射中，但没有运气。

标签： javascript jquery html symfony assetic

【解决方案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 控制台命令后，这些脚本应该可以很好地链接到源映射和源文件。

【讨论】：