logo标签列表

在Symfony2中使用Assetic进行源映射

javascriptjqueryhtmlsymfonyassetic
10

在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文件中的源映射看起来像这样，并且也在同一个目录中。

//# sourceMappingURL=jquery.mobile-1.4.2.min.map

错误：

Chrome中的404

它在其他浏览器中能用吗？ - kskaradzinski
目前我无法进行测试。但是，由于路径不正确，它可能在支持源映射的任何浏览器中都无法正常工作。 - Tuxes3
没有找到任何解决方案。我尝试在 web/js 中添加符号链接到实际的源代码映射，但没有成功。 - Nico Prat
1个回答
5
你的示例存在问题，因为你将两个来源组合成一个，并且这两个来源位于不同的位置。如果你在开发环境中查看生成的脚本标签，你会看到这两个路由大致是这样的:
<script src="/js/ed5a632_jquery.min_1.js"></script>
<script src="/js/ed5a632_jquery.mobile.min_2.js"></script>

Assetic不为源映射创建匹配的路由，因此这些文件现在具有无效的值，因此会出现404错误。
一个解决方案是将源映射（和源代码）导出到相对于动态路由的位置，使用配置：
ref: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控制台命令后，这些脚本应该能够正确链接到源映射和源文件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接