jquery - 在 TypeScript 中安装 jQuery 时出错

Question

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

./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 而不会出现任何错误。

Answer 1

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

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