Django ManifestStaticFilesStorage如何处理JS内部导入文件的哈希命名？

以下是4种可落地的解决方法，可根据项目规模选择：

• 自定义扩展ManifestStaticFilesStorage
  继承Django自带的存储类，新增JS文件import语句的匹配规则，运行collectstatic时自动替换JS内部的导入路径为带哈希的版本，示例代码如下：

  from django.contrib.staticfiles.storage import ManifestStaticFilesStorage
  import re
  
  class JSManifestStaticFilesStorage(ManifestStaticFilesStorage):
      patterns = (
          # 保留原有的CSS资源匹配规则
          (
              "*.css",
              (
                  r"""(?P<matched>url\(['"]{0,1}\s*(?P<url>.*?)["']{0,1}\))""",
                  r"""(?P<matched>@import\s*["']\s*(?P<url>.*?)["'])""",
              ),
          ),
          # 新增ES模块import语句的匹配规则
          (
              "*.js",
              (
                  r"""(?P<matched>import\s.*?from\s*["'](?P<url>.*?)["'])""",
              ),
          ),
      )
  

  配置完成后在settings.py中修改静态文件存储配置即可：
  STATICFILES_STORAGE = '你的项目路径.storage.JSManifestStaticFilesStorage'
  注意如果项目中JS语法比较复杂，可以调整正则规则避免误匹配。

• 接入前端构建工具处理
  中大型项目推荐使用该方案，选择Vite、Webpack、Rollup等前端构建工具管理所有静态资源：
  构建阶段工具会自动处理所有JS内部导入、CSS资源引用，统一给所有资源添加哈希后缀
  把构建后的产物目录配置为Django的STATICFILES_DIRS路径即可，无需修改Django原生静态文件逻辑，适配性更强。

• 使用浏览器原生Import Maps
  小型项目可选择该方案，不需要修改现有JS代码和Django存储逻辑，只需在HTML模板的head标签中添加导入映射表：

  <script type="importmap">
  {
    "imports": {
      "./javascript_helper_lib.js": "{% static 'myapp/js/javascript_helper_lib.js' %}",
      // 其余需要导入的JS模块都在这里添加映射规则
    }
  }
  </script>
  

  JS内部的原始导入路径会被浏览器自动匹配为映射表中带哈希的路径，无需修改原有JS代码。

• 把JS作为模板渲染
  如果是极简单的小项目，可以把JS文件放到模板目录下，作为Django模板渲染，直接在import路径中使用static模板标签：

  import {func1, func2, func3} from "{% static 'myapp/js/javascript_helper_lib.js' %}";
  

  该方案维护成本较高，仅适合临时小项目使用。

内容的提问来源于stack exchange，提问作者jd80