TypeScript集成jQuery报错：无法解析‘jquery’模块

我来帮你排查这个头疼的问题——你遇到的Module not found: Can't resolve 'jquery'错误，通常是webpack配置、TypeScript配置或者依赖安装的细节出了纰漏，咱们一步步来搞定：

1. 先确认依赖安装的正确性 #

首先打开你的package.json，检查两个关键依赖是否存在：

• dependencies里必须有jquery（这是实际的库文件）
• devDependencies里必须有@types/jquery（这是TypeScript的类型定义文件）

如果缺失的话，重新执行安装命令：

npm install jquery --save
npm install @types/jquery --save-dev

2. 配置webpack的ProvidePlugin（核心步骤） #

jQuery经常作为全局变量使用，webpack需要明确知道如何解析它。在你的webpack配置文件里，补充ProvidePlugin配置，同时完善resolve和module规则：

const webpack = require('webpack');

module.exports = {
  entry: './src/App.ts',
  plugins: [
    // 全局注入jQuery变量，让webpack自动解析$和jQuery
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  resolve: {
    // 让webpack能解析.ts和.js后缀的文件
    extensions: ['.ts', '.js'],
    // 可选：如果还是找不到，添加别名指定jquery的具体路径
    alias: {
      'jquery': require.resolve('jquery')
    }
  },
  module: {
    rules: [
      // 别忘了配置TypeScript的loader，比如ts-loader
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

3. 调整tsconfig.json的关键配置 #

TypeScript的编译选项也会影响模块导入，确保你的tsconfig.json里有这些设置：

{
  "compilerOptions": {
    "target": "ES6", // 根据你的项目需求调整版本
    "module": "ESNext", // 和webpack的模块系统匹配，也可以用CommonJS
    "esModuleInterop": true, // 重中之重！允许CommonJS模块以ES模块的方式导入
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["./node_modules/@types"], // 告诉TS去哪里找类型定义
    "types": ["jquery"] // 显式引入jQuery的类型定义
  },
  "include": ["src/**/*"] // 确保TS能编译src下的所有文件
}

这里的esModuleInterop是解决import $ from 'jquery'报错的关键，因为jQuery本质是CommonJS模块，开启这个选项后TS就能正确识别它的默认导出了。

4. 使用正确的导入方式 #

• 如果已经配置了ProvidePlugin，你甚至不需要手动导入，直接在.ts文件里用$或者jQuery就行
• 如果要手动导入，推荐这两种方式：

  import $ from 'jquery';
  // 或者
  import * as $ from 'jquery';
  

  ❌ 注意：不要导入@types/jquery，类型定义是给TS做类型检查用的，不是实际的代码模块，所以import jquery = require("@types/jquery")这种写法是错误的，会直接导致模块找不到。

5. 清理缓存重新构建 #

有时候node_modules或者webpack的缓存会导致奇怪的问题，执行以下命令彻底清理后重新安装：

rm -rf node_modules package-lock.json
npm install
npx webpack --clean

完成这些步骤后，再尝试编译你的项目，应该就能解决模块找不到的问题了。

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