已安装@types/jquery，如何在Webpack中用import引入全局jQuery且不打包真实模块？

嘿，这个场景我熟！你遇到的问题本质是：TypeScript靠@types/jquery能识别类型，但Webpack在打包时会较真地去找jquery模块的实际文件——可你根本没装这个包，自然就报错了。得同时给Webpack和TypeScript各自“打个招呼”，让它们明白你用的是外部全局的jQuery。

下面分两步来配置：

1. 让Webpack别去找jquery模块 #

打开你的Webpack配置文件（比如webpack.config.js），添加externals配置项，告诉Webpack“jquery是外部已经存在的全局变量，不用打包它”：

module.exports = {
  // ...你的其他Webpack配置
  externals: {
    jquery: 'jQuery' // 这里的'jQuery'要和你外部加载的全局变量名完全一致
  }
};

这样Webpack打包时就会跳过对jquery模块的解析，直接使用全局环境里的jQuery变量。

2. 让TypeScript认可你的导入语法 #

你已经装了@types/jquery，类型定义是有的，但要让TypeScript适配import * as $ from 'jquery'的写法，需要调整一下tsconfig.json的配置：
在compilerOptions里加上这两个选项（如果还没加的话）：

{
  "compilerOptions": {
    // ...其他配置
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "moduleResolution": "node" // 确保用Node.js的模块解析逻辑，默认一般就是这个
  }
}

这两个选项能让TypeScript更好地处理CommonJS风格的模块导入，完美适配@types/jquery的类型定义。

如果做完上面两步还是有类型提示的小问题，可以检查下tsconfig.json里的typeRoots是否包含@types目录（默认是包含的，所以大多时候不用额外改）：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"]
  }
}

兜底方案：创建空模块占位文件 #

要是还是碰到“模块找不到”的报错，可以在项目里创建一个空的jquery.ts文件（比如放在src目录下），然后在tsconfig.json里用paths把jquery映射到这个空文件：

{
  "compilerOptions": {
    "paths": {
      "jquery": ["./src/jquery.ts"] // 路径根据你放文件的位置调整
    }
  }
}

这个空文件就是个“占位符”，只是给TypeScript和Webpack一个“模块存在”的信号，实际运行时还是用外部加载的全局jQuery。

这样配置完，你就能在所有代码里放心用import * as $ from 'jquery'了——既享受TypeScript的类型提示，又不会把jQuery打包进你的代码。以后要是想改成打包jQuery的方式，只需要删掉Webpack的externals配置，再安装jquery包就行，代码里的导入语句完全不用改，非常灵活！

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