jquery - Visual Studio 2019 - 添加客户端库(TypeScript、JQuery 等)的正确方法

Question

[2019 年 7 月 16 日编辑第 1 条]我很困惑。我正在尝试一个 .NET Core 3.x Web 应用程序，我想在其中使用:

• jQuery
• typescript

我可以使用 TypeScript，但它无法理解 jQuery 的“$”符号。

我已经通过 NuGet 添加了“DefinitelyTyped”库，但没有任何乐趣。

我认为我的困惑在于我应该如何添加这些客户端库。我尝试添加客户端库(通过右键单击解决方案)，并将其放入 libman.json 文件中。还有一种使用package.json(我认为是node)的方法。

我真正想了解的是 Visual Studio 2019 的首选方式是什么。

关于具体问题(我真的可以通过一些“新手”指导来做到这一点)....

在依赖项下，我现在有:

NPN

• 删除
• 吞咽
• jquery
• jquery-ui

NuGet

• jquery.TypeScript.DefinitelyTyped
• jqueryui.TypeScript.DefinitelyTyped Microsoft
• Microsoft.TypeScript.MSBuild

然后，在脚本下我有example.ts

var example = {
    showGreeting: function(): void {
        alert("Hello user");
        let x: any = $('abc');
    }
};

example.showGreeting();

(这是无法识别“$”符号的地方)

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "files": [
    "./example.ts"
  ],
  "compileOnSave": true
}

libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "unpkg",
      "library": "bootstrap@4.3.1",
      "destination": "wwwroot/lib/bootstrap/"
    }
  ]
}

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "jquery": "3.4.1",
    "jquery-ui": "1.12.1"
  },
  "devDependencies": {
    "gulp": "4.0.2",
    "del": "5.0.0"
  }
}

编辑#1

我从 package.json 的“依赖项”部分中删除了客户端库，并将它们移至 libman.json 的库部分。它们正式从解决方案的“npm”依赖项下消失，现在出现在 wwwroot/lib 下。

libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "unpkg",
      "library": "bootstrap@4.3.1",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "jquery@3.4.1",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "library": "jqueryui@1.12.1",
      "destination": "wwwroot/lib/jqueryui/"
    }
  ]
}

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
  },
  "devDependencies": {
    "gulp": "4.0.2",
    "del": "5.0.0"
  }
}

我认为这是朝着正确方向迈出的一步。

但是，TypeScript 仍然给我错误:

error TS2581: Build:Cannot find name '$'. Do you need to install type definitions for jQuery?

Answer 1

好的 - 现在可以正常工作了。以下定义了我必须安装的内容。

NuGet

• Microsoft.TypeScript.MSBuild
• Microsoft.Web.LibraryManager.Build

Libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "unpkg",
      "library": "bootstrap@4.3.1",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "jquery@3.4.1",
      "destination": "wwwroot/lib/jquery/",
      "files": [
        "jquery.min.js",
        "jquery.min.map",
        "jquery.js",
        "core.js"
      ]
    }
  ]
}

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
  },
  "devDependencies": {
    "gulp": "4.0.2",
    "del": "5.0.0",
    "@types/jquery": "3.3.30",
    "@types/jqueryui": "1.12.7"
  }
}