Question

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

错误：

404 in chrome

Answer 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

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，但是将所有这些与模板代码分开会有点麻烦。

如果您可以在生产站点中使用两个单独的资产，更简单的解决方案是单独引用这两个资产，例如。

<script src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
<script src="{{ asset('bundles/bmatznerjquerymobile/js/jquery.mobile.min.js') }}"></script>

运行assets:install控制台命令后，这些脚本应该可以很好地链接到源映射和源文件。

在symfony2中使用assetic进行源映射

1 个答案: