在 TypeScript 中安装 jQuery 时出错

Posted 2023-03-13

【中文标题】在 TypeScript 中安装 jQuery 时出错

【英文标题】：Error while installing jQuery in TypeScript

【发布时间】：2019-12-11 10:56:45

【问题描述】：

我想在我的 TypeScript 项目（不是 Angular2+/Angular）中使用 jquery。但我收到以下错误：

./main.ts 中的错误 (1,20)：错误 TS2307：找不到模块 'jquery'。 webpack: 编译失败。

我尝试了所有可能的解决方案，但仍然抛出错误。我可以做些什么来解决这个问题？

我已经安装了@types、@types/jquery，我还升级了我的 TypeScript 和 jQuery，全部来自 NPM。

package.json 文件：

  "name": "npm-ts-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": 
    "@progress/kendo-theme-default": "^4.1.0",
    "@progress/kendo-ui": "^2019.2.619",
    "@types/jquery": "^3.3.30",
    "@types/kendo-ui": "^2019.1.2",
    "jquery": "^3.4.1"
  ,
  "devDependencies": 
    "css-loader": "^3.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  

main.ts 文件：

import * as $ from 'jquery';

//jQuery code

webpack.config.js：

module.exports = 
    entry: "./main.ts",
    output: 
        filename: "./bundle.js",
    ,

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: 
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".ts", ".js"]
    ,

    module: 
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
             test: /\.ts?$/, loader: "ts-loader" 
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
             test: /\.js$/, loader: "source-map-loader" 
        ]
    
;

我想在我的 TypeScript 项目中使用 jQuery 而不会出现任何错误。

【参考方案1】：

将此添加到您的 webpack.config.js

plugins: [
    new webpack.ProvidePlugin(
        $: "jquery",
        jQuery: "jquery"
    ),

【讨论】：

我试过了。但我收到以下错误：（1,20）：错误 TS2307：找不到模块“jquery”。 webpack：编译失败。 npm 错误！ npm-ts-example@1.0.0 开始：webpack-dev-server --inline --open

你可以尝试只运行webpack-dev-server 吗？

它要求我安装 webpack-cli：CLI 移到了一个单独的包中：webpack-cli 除了 webpack 本身之外，请安装“webpack-cli”以使用 CLI。我这样做了，现在它说：ReferenceError: webpack is not defined

我这样做了，但仍然出现错误。但是我发现了问题。我更新了 ts-loader 版本并在 webpack.config.js 中更改了我的模块非常感谢您的帮助