javascript – 源码映射与symfony2中的assetic

在 html5中有这个很酷的功能源地图.在我的Symfony2项目中,我使用了使用这个功能的jQuery mobile(我使用Bmatzner JQueryMobileBundle进行集成).

在我的< 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

错误：

解决方法

您的示例的问题是您将两个来源组合成一个,并从两个不同的位置组合.如果您在开发环境中查看生成的脚本标签,您会看到两条路由如下所示：

<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>

运行资产后,安装控制台命令,这些脚本应该链接到源地图和源文件.

javascript – 源码映射与symfony2中的assetic

解决方法

相关文章