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

Visual Studio 2019 - correct way to add client libraries (TypeScript, JQuery etc)

提问人:DrGriff 提问时间:7/16/2019 最后编辑:DrGriff 更新时间:7/16/2019 访问量:5004

问:

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

  • j查询
  • TypeScript(打字稿)

我已经让 TypeScript 工作了,但它拒绝理解 jQuery '$' 符号。

我通过 NuGet 添加了“DefinitelyTyped”库,但没有喜悦。

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

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

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

在 Dependencies 下,我现在有:

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": "[email protected]",
      "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": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "library": "[email protected]",
      "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仍然给我错误:

错误 TS2581:Build:Cannot find name '$'。是否需要安装类型 jQuery的定义?

jQuery visual-Studio TypeScript 客户端

评论

1赞 Bluesight 7/16/2019
我不会将 NuGet 用于打字稿定义。请尝试改用 libman:stackoverflow.com/questions/53536608/...Libman 绝对是客户端库的正确方法。
0赞 DrGriff 7/16/2019
@Bluesight。我的想法是 TypeScript 是在服务器上编译的(以生成 JavaScript),因此 TypeScript 定义应该由 NuGet 拉取,因为它在这个阶段并不是真正的“客户端”代码。
0赞 DrGriff 7/16/2019
请注意,打字稿定义是“开发工具”。我将尝试将它们添加到package.json部分。

答:

1赞 DrGriff 7/16/2019 #1

好的 - 现在开始工作了。下面定义了我必须安装的内容。

NuGet

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

Libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "unpkg",
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "[email protected]",
      "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"
  }
}