从JSPM/SystemJS迁移Webpack时引入AMD模块报错求助

我之前迁移老项目到Webpack时，也踩过AMD+jQuery老包的坑，给你几个针对性的解决思路，应该能帮你搞定：

1. 检查并修正imports-loader的配置 #

首先确保你用对了imports-loader的参数，因为AMD模块需要明确注入依赖。在你的webpack.config.js里，针对老包添加这样的规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        // 匹配你的老包入口文件
        test: require.resolve('your-old-amd-package-name'),
        use: [
          {
            loader: 'imports-loader',
            options: {
              // 指定模块类型为AMD
              type: 'amd',
              // 把jQuery作为默认导入，命名为$，注入到AMD模块的依赖列表
              imports: ['default jquery $']
            }
          }
        ]
      }
    ]
  }
}

这个配置会告诉Webpack：把jQuery作为依赖注入到目标AMD模块里，替换它可能依赖的全局$或jQuery。

2. 暴露jQuery为全局变量（针对依赖全局的老包） #

有些老AMD包写得不规范，没有在define里声明jQuery依赖，而是直接用全局的$。这时候你需要用expose-loader把jQuery挂载到window对象上：

// 在module.rules里添加jQuery的暴露规则
{
  test: require.resolve('jquery'),
  loader: 'expose-loader',
  options: {
    exposes: ['$', 'jQuery']
  }
}

这样老包执行时就能找到全局的$了，配合上面的imports-loader一起用，基本能解决大部分依赖问题。

3. 用script-loader直接当作全局脚本引入 #

如果上面两种方法都不行，说明这个老包的AMD写法可能非常不标准（比如没有正确的define结构）。这时候可以放弃模块处理，直接用script-loader把它当作普通全局脚本引入：

// 修改老包的loader规则
{
  test: require.resolve('your-old-amd-package-name'),
  loader: 'script-loader'
}

然后在你的代码里直接导入：

import 'your-old-amd-package-name';

script-loader会把脚本放到全局环境执行，只要你已经通过expose-loader把jQuery暴露为全局变量，老包就能正常运行。

4. 确认resolve配置是否正确 #

有时候老包的package.json里没有正确的main字段，或者入口文件不在默认路径下。你可以在resolve.alias里手动指定老包的正确路径：

resolve: {
  alias: {
    'your-old-amd-package-name': path.resolve(__dirname, 'src/vendor/your-old-package/amd-bundle.js')
  }
}

确保Webpack能找到正确的模块文件。

最后建议先在mode: 'development'模式下调试，这样能看到更详细的错误信息，方便定位问题。

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