Question

对于ASP.NET Core 2.x Web应用程序，我希望它作为标准模式非常简单。我显然做错了。

我有这个文件夹结构。

projectRoot
├── node_modules
│   ├── jquery
│   └── // others you'd see in node_modules
├── wwwroot
│   ├── lib
│   │   ├── jquery
│   |   │   └── dist
|   │   |   │   └── jquery.js
│   │   └── // others copied by specific Gulp tasks from node_modules
│   ├── js
│   │   └── site.js // generated from site.ts
│   ├── css
│   └── page.html // script tag to /js/site.js
├── ts
│   └── site.ts
├── gulpfile.js
└── tsconfig.json

现在我的问题是在我的site.ts中，我需要从jquery导入

// site.ts
import $ from "???"

但考虑到以下因素，我无法弄清路径

：

它最终被写入site.js
必须可以通过浏览器访问。
它必须可由TypeScript编译器解析。
TypeScript编译器似乎使用node_modules\@types\jquery

这是我的tsconfig.json。请注意，尽管我没有添加任何额外的配置，但是我使用Gulp任务来编译我的.ts文件，因此它似乎使用下面的json。

{
    "compilerOptions": {

        "module": "es2015",
        "baseUrl": "./wwwroot/js/", // This must be specified if "paths" is.
        "paths": {
            "*": [ "./node_modules/@types/*" ],
            "../lib/jquery/dist/jquery.js": [ "./node_modules/jquery/dist/jquery" ] // This mapping is relative to "baseUrl"
        },
        "esModuleInterop": true,
        "moduleResolution": "node"
    }
}

我一直在和baseUrl和paths玩游戏。

无论哪种TypeScript都可以解决它，但是在浏览器中它的路径却是错误的-我认为这是因为Chrome无法找到该路径：

import $ from "lib/jquery/dist/jquery";

未捕获的SyntaxError：意外的标识符

或者TypeScript无法解析它并且无法编译。

再次，我以为这不是一个不寻常的设置。

Answer 1

要使用带有角度的jquery，我需要安装2个软件包

npm install jquery --save
npm install @types/jquery --save

然后在architect =>的angular.json文件的构建脚本部分中，我将为jquery lib添加路径

"scripts": [
  "node_modules/jquery/dist/jquery.min.js"
]

然后在tsconfig.app.json中。在类型部分添加jquery，您应该会很好，因此无需在任何地方导入$

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

更新

依赖于您使用的库（例如moment或lodash），它们具有供用户使用的导出API，因此您可以像正常情况一样使用常见的导入。

但是某些第三方库（例如jquery，mathjax）仅向我们提供js文件，因此我们只能导入到angular.json来全局使用它。

所以这取决于他们是否向我们导出API的库

Answer 2

所以看来我根本不应该导入jquery，但是有些魔术使它可以正常工作。

How to import JQuery into a Typescript file?

我删除了导入语句，它才起作用。

但是，我仍然不确定如何以这种方式使用其他JS模块，我需要为此文件夹配置配置TypeScript，所以我将这个问题保留。

TypeScript模块位于node_modules下，但部署在wwwroot下

2 个答案: