TypeScript项目集成jQuery遇Webpack模块查找错误求助

你在index.ts里用了import $ from "jquery"，Webpack会自动去node_modules里找jquery模块，但你的项目只是通过script标签把jQuery挂到了window上，根本没装jquery包，所以Webpack找不到对应模块。虽然@types/jquery给TS提供了类型声明让编译通过，但Webpack需要实际的模块文件或者明确的外部依赖配置才能正常打包。

下面三种方案任选其一：

方案一：配置Webpack externals（推荐） #

告诉Webpackjquery是外部依赖，不用打包进输出文件，直接用全局的jQuery变量（对应script引入的全局对象）。修改webpack.config.js，添加externals字段：

module.exports = {
    mode: "production",
    entry: {
        app: './index.ts',
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [{
            test: /\.ts$/,
            exclude: /node_modules/,
            use: {
                loader: 'ts-loader'
            }
        }]
    },
    resolve: {
        extensions: ['.ts']
    },
    devtool: "source-map",
    // 新增外部依赖配置
    externals: {
        jquery: 'jQuery'
    }
}

index.ts里的import $ from "jquery"可以保留，TS依然能拿到类型提示，Webpack会把这个import映射到全局的jQuery变量。

方案二：直接用全局变量 #

删掉index.ts里的import语句，直接用window上的$或者jQuery就行，@types/jquery已经让TS识别了全局类型：

// 移除 import $ from "jquery"
let htmlEle: JQuery = $("#ele_id");
console.log(htmlEle);
// 也可以明确写window.$
let htmlEle2: JQuery = window.$("#ele_id");
console.log(htmlEle2);

如果TS突然提示$未定义，手动加个全局声明就行（一般@types/jquery已经自动处理了，这步可选）：

declare const $: JQueryStatic;

方案三：安装jquery包 #

如果允许装jquery依赖，执行命令：

npm install jquery

装完之后Webpack就能找到jquery模块，不用改配置，同时可以删掉HTML里的script标签（避免重复引入）。

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