使用jQuery和Visual Studio SPA模板

Posted 2021-04-03

我使用Visual Studio SPA模板创建了一个项目。该项目使用ASP.NET Core模板，Vue.js和Webpack。我在项目中使用jQuery时遇到问题。

在package.json文件中，它有

  "devDependencies": {
    "@types/webpack-env": "^1.13.0",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.0.0",
    "bootstrap": "^3.3.6",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.2.1",
    "style-loader": "^0.13.1",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.7",
    "vue": "^2.2.2",
    "vue-loader": "^11.1.4",
    "vue-property-decorator": "^5.0.1",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.2",
    "webpack": "^2.2.0",
    "webpack-hot-middleware": "^2.12.2"
  }

在ProjectName.Web.csproj内：

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.3" />
    <PackageReference Include="jQuery" Version="3.2.1" />
  </ItemGroup>

当我尝试使用以下方法将jQuery导入TypeScript文件：

import * as $ from 'jquery';

我收到错误：

找不到模块'jquery'的声明文件。 {project path} /node_modules/jquery/dist/jquery.js'隐式具有'any'类型。

为了使用jQuery我缺少什么设置？另外我想确认package.json和ProjectName.Web.csproj文件中的行在项目中面对安装jQuery。

答案

我终于能够让jQuery在我的项目中工作了。

我使用示例here更新了我的代码

我还需要为我的项目运行npm install @types/jquery。

在这两个步骤之后并使用import * as $ from 'jquery';语句，我收到错误：

[at-loader]中的错误./node_modules/@types/jquery/index.d.ts:2961:63 TS2304：找不到名字'Iterable'。

通过在线搜索，我发现了变化

"target": "es5"

至

"target": "es6"

在tsconfig.json文件中删除了错误。