Django：使 JS 源映射与静态文件文件名哈希兼容答案

【问题标题】：Django: Make JS source maps compatible with staticfiles filename hashingDjango：使 JS 源映射与静态文件文件名哈希兼容
【发布时间】：2016-04-28 23:08:12
【问题描述】：

在我们的 Django 项目中，我们使用 Gulp 来编译我们的资产，然后使用 UglifyJS 来缩小它们。在整个过程中，我们正在生成源地图，它们似乎工作正常。

当我们使用 Django static 模板标签来包含我们的缩小文件时，问题就来了。假设我们有一个名为 ourapp.min.js 的缩小 JS 文件。在我们的模板中，我们会写：

<script src="{% static 'ourapp.min.js %}"></script>

这将被编译成类似：

<script src="/ourstaticroot/ourapp.min.0123456789ab.js"></script>

（其中0123456789ab 是文件内容的哈希）

现在的问题是，虽然文件被重命名了，但是我们的sourcemap仍然指向旧的文件名，所以突然失效了。如果我们随后需要调试此页面（例如，使用 Sentry），它无法找到源文件，而我们只能调试 uglified 文件，这变成了更多的任务。

有人知道解决这个问题的好方法吗？我们希望继续对我们的资产使用 Gulp，并继续使用散列文件名，因为这样可以防止缓存过时的资产文件引起的问题。

【问题讨论】：

如果静态标签有机会使用正则表达式并且您可以编写类似 {% static 'ourapp\.min\.[0-9a-b]+\.js %} 的内容，适合你的情况吗？
试试这样的：github.com/olasitarska/django-gulp-rev
您的哈希是来自 gulp 缩小本身还是来自 ManifestStaticFileStorage？

标签： django hash gulp source-maps

【解决方案1】：

这并不重要，因为原始文件会被保留。因此，如果您的文件指向没有散列的地图，则它应该由 Django 提供。当然，您需要小心长期到期标头。如果您使用whitenoise 很好，因为它们可以正确处理过期，并且长期过期标头仅在散列文件上设置。

干杯 -乔

【讨论】：

【解决方案2】：

我看到您有两种选择。目前尚不清楚缓存破坏后缀究竟是在何处添加到您的文件中，但此时您可以：

使用一些字符串处理来操作资产并将其sourceMapUrl 设置为由您的系统生成并包含预期后缀//# sourceMappingURL=/path/to/file.js.<suffix>.map 的url。这可能是 gulp 步骤中的简单 bash 命令（如果发生这种情况）
或者，浏览器也将接受 http 标头 SourceMap: /path/to/file.js.map，您可以指示资产服务器为带有标头的文件设置。这可能会更困难，具体取决于您的基础架构。

【讨论】：