如何解决SystemJS加载jquery时出现的404未找到错误？

遇到这种404错误，本质是SystemJS找不到你指定的jQuery文件路径，咱们一步步排查解决：

1. 检查SystemJS配置的映射规则 #

打开你的systemjs.config.js，重点关注map和packages配置块：

• 确认是否存在jquery的映射项，示例如下：

  map: {
    // ...其他模块映射
    "jquery": "npm:jquery@3.6.0/dist/jquery.js" // 替换为你实际安装的jQuery版本
  }
  

  如果没有这个映射，SystemJS会默认去你配置的baseURL（这里看起来是/dist）下找jquery.js，但jspm安装的jQuery通常存放在jspm_packages/npm/目录下，所以必须配置正确的映射告诉SystemJS去哪里查找。
• 同时检查baseURL的设置，如果baseURL设为/，要保证映射路径对应正确；如果baseURL是/dist，则需要确认jQuery文件确实在dist目录下，或者调整映射路径。

2. 验证jQuery是否被jspm正确安装 #

• 在命令行执行：jspm inspect jquery，查看输出是否有jQuery的安装记录，包括版本号和安装路径。
• 手动查看项目目录下的jspm_packages/npm/文件夹，确认是否存在jquery@x.x.x（x.x.x为实际版本号）的目录，且该目录下的dist/jquery.js文件是否存在。
• 如果找不到这个目录，说明jspm安装失败，重新执行jspm install jquery，注意查看安装过程是否有报错（比如网络问题导致下载失败）。

3. 手动指定Toastr的依赖映射 #

Toastr依赖jQuery，有时候jspm可能没正确处理这个依赖的路径，你可以在SystemJS配置里手动指定：
在packages块中添加：

packages: {
  // ...其他包配置
  'toastr': {
    meta: {
      'toastr.js': {
        deps: ['jquery'] // 明确指定Toastr依赖的jquery模块
      }
    }
  }
}

这样SystemJS加载Toastr时，会严格按照你配置的jQuery映射去查找文件。

4. 测试文件路径的可访问性 #

在浏览器地址栏直接访问http://localhost:8000/jspm_packages/npm/jquery@[你的版本号]/dist/jquery.js，如果能正常加载文件，说明是SystemJS配置的问题；如果还是404，那就是文件确实不存在，需要重新安装jQuery。

5. 清理缓存并重新安装 #

如果以上步骤都没解决问题，试试：

• 删除项目下的jspm_packages文件夹和jspm.config.js文件；
• 重新执行jspm install和jspm install jquery；
• 清除浏览器缓存（或用无痕模式打开页面），避免缓存导致的路径识别问题。

内容的提问来源于stack exchange，提问作者Μenelaοs