JSPM打包模块请求jspm_packages的原因及生产构建加载异常排查

我来逐个拆解你的两个问题，这些都是JSPM生产打包时常见的坑，结合我处理过的类似情况给你分析：

下面是几个最常见的诱因：

• 未启用完整自包含打包模式：如果你的打包配置没开启bundleSFX（单文件自执行打包），只是用了普通的bundle模式，那打包后的文件仍然依赖SystemJS加载器，部分深层依赖可能没被完全整合进去，运行时就会自动去jspm_packages拉取遗漏的资源。另外，如果没设置bundleAll: true，也容易漏掉一些嵌套依赖。
• 动态导入未被静态分析：代码里如果有动态导入（比如System.import('./some-module.js')或者ES的动态import()语法），JSPM的打包器没法静态识别这些动态路径，导致这些模块没被打包进build.js，运行时只能去jspm_packages请求。
• 外部资源配置不当：如果在JSPM配置或gulp脚本里，把某些依赖标记为external（外部依赖），或者像图片、字体这类资源被设置为不打包，这些内容就会在运行时从jspm_packages加载。
• 缓存与旧配置残留：浏览器缓存了旧的systemjs.config.js，或者gulp打包时没同步更新配置文件，旧配置里的映射仍然指向jspm_packages路径，导致运行时还是按旧规则请求资源。
• 插件依赖未被打包：如果代码依赖了systemjs-plugin-babel这类插件，但打包时没把插件本身及其配置文件整合进build.js，运行时就会去请求插件的配置文件（比如你遇到的systemjs-plugin-babel@0.0.21.json）。

结合你的场景（用gulp打包），可以按以下步骤排查解决：

1. 检查gulp打包的JSPM配置：确保你用的是jspm.buildSFX而不是普通的jspm.build。buildSFX会生成完全自包含的打包文件，不需要依赖外部的SystemJS加载器和jspm_packages资源。你的gulp任务应该类似这样：

   jspm.buildSFX('src/main.js', 'dist/build.js', {
     minify: true,
     sourceMaps: false
   })
   

   如果用了普通build，打包后的文件还是需要SystemJS来加载，很可能会触发外部资源请求。

2. 排查动态导入代码：搜索你的代码库，看看有没有未被静态分析的动态导入。如果有，要么改成静态导入，要么在JSPM打包配置里手动指定要包含这些模块。

3. 清理并更新SystemJS配置：生产环境下，确保你没有加载旧的systemjs.config.js，或者已经把配置里的map和packages指向打包后的文件，而不是jspm_packages。如果用了buildSFX，甚至不需要加载SystemJS配置文件，直接引入build.js即可。

4. 确认插件被正确打包：systemjs-plugin-babel@0.0.21.json的请求说明打包时没把这个插件整合进去。你可以检查项目package.json里的jspm配置，看看这个插件是否被标记为本地依赖，或者在打包时手动将其加入打包列表。另外，确保代码里没有直接引用插件的配置文件。

5. 清理所有缓存：清理浏览器的缓存，同时检查gulp是否用了缓存插件（比如gulp-cache），确保每次打包都是重新构建，没有复用旧的打包产物。

6. 验证JSPM版本：如果用的是较旧的JSPM版本，可能存在打包bug，尝试升级到稳定版本后重新打包测试。

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