如何在 Web 应用程序（ASP.NET Core）中使用 TypeScript 导入语句而不是 <reference path...>？

Posted 2023-03-13

【中文标题】如何在 Web 应用程序（ASP.NET Core）中使用 TypeScript 导入语句而不是 <reference path...>？

【英文标题】：How to use TypeScript import statement instead of <reference path...> in a Web application (ASP.NET Core)?

【发布时间】：2021-11-21 09:02:13

【问题描述】：

上下文

我的 Web 应用程序 (ASP.NET Core) 中有一个工作版本的打字稿 Hello World 通过 NuGet 包 "Microsoft.TypeScript.MSBuild" Version="4.4.2" 和 tsconfig.json 使用 typscript 编译器。 （见下文） 我想使用 3rd 方库，并通过 packages.json 成功添加 "@types/lodash": "^4.14.175"（见下文） 我添加了/// <reference path="../node_modules/@types/lodash/index.d.ts"/>（见下文） 一切正常，但 /// <reference path="..." 行带有绿色下划线，ESLint 显示

不要对 index.d.ts 使用三斜杠引用，而是使用 import。

好的，我稍后会使用导出/导入，所以我编辑了三斜杠参考线作为注释，并添加了import * as _ from "lodash" 行，它编译得很好，但是在 chrome 中运行时 导致运行时错误：

不能在模块外使用 import 语句

所以我将<script tag 更改为以下内容：<script type="module" src="~/js/app.js"></script>

但是这会导致以下 chrome 运行时错误：

无法解析模块说明符“lodash”。相对引用必须以“/”、“./”或“../”开头。

问题

现在我被困住了，由于我的知识非常有限，我猜想缺少一些步骤/转换，但是什么？我试图在我的 .ts 文件的导入语句中包含一些路径（导致编译错误）。编译时我想用工作中的import 指的是@typings，但是运行时lodash.js 是来自cdn，两者没有任何关系...

app.ts

// commented out /  <reference path="../node_modules/@types/lodash/index.d.ts"/>
import * as _ from "lodash"
console.log(_.camelCase("Hello"));

发出的 app.js

// commented out /  <reference path="../node_modules/@types/lodash/index.d.ts"/>
import * as _ from "lodash"; 
console.log(_.camelCase("Hello"));
//# sourceMappingURL=app.js.map

index.html

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script type="module" src="~/js/app.js"></script>

tsconfig.json

  "compileOnSave": true,
  "compilerOptions": 
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "module": "ES6",
    "outDir": "wwwroot/js"
  ,
  "exclude": [
    "node_modules",
    "wwwroot"
  ]

packages.json

  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": 
    "@types/lodash": "^4.14.175"
  

【参考方案1】：

尝试修改tsconfig.json

// tsconfig.json

  ...
  @types: ["node_modules/"] // or typings

或者使用 ES5 require

const _ = require("lodash");

---

找到以下可能的解决方案

需要将所需文件复制到 wwwroot 文件夹，以便在应用程序运行时访问它们。

为此，您需要使用捆绑器将文件捆绑在一起（应该在默认的 ASP.NET Core 项目模板中）或使用 Gulp 或 Grunt 等任务运行器在构建/发布时运行任务，这样做为你。请参阅有关 Gulp 示例的 ASP.NET Core 文档。

原答案：https://***.com/a/43513137/13747848

注意： 请注明原答辩人！

---

编辑

对于错误

未捕获的类型错误：无法解析模块说明符“lodash”。相对引用必须以“/”、“./”或“../”开头。

截至 2021 年，请考虑Márton Salomváry（2018 年 1 月）的以下声明：

不幸的是，即使大多数以 ES6 模块格式编写或发布的库也无法工作，因为它们以转译器为目标并依赖于 Node.js 生态系统。为什么这是个问题？ 使用 import _ from 'lodash' 之类的裸模块路径目前无效，浏览器不知道如何处理它们。

还有Jake Archibald（2017 年 5 月）的声明：

目前不支持“Bare”导入说明符。

有效的模块说明符必须匹配以下之一：

完整的非相对 URL。 以 / 开头。 以./.开头 以 ../. 开头

还有javascript.info：

在浏览器中，import 必须获取相对 URL 或绝对 URL。没有任何路径的模块称为“裸”模块。 不允许导入此类模块。

某些环境，如 Node.js 或捆绑工具允许裸模块，没有任何路径，因为它们有自己的方式来查找模块和挂钩来微调它们。 但浏览器还不支持裸模块。

Bundlers 促进了浏览器尚不支持的“Bare Imports”的使用。除非您捆绑您的代码，否则我建议使用 @Asler 提出的解决方案。另外，目前正在做大量工作来研究“Bare Imports”在浏览器中的实现，如果您想监控整体进度，请关注link。

原答案：https://***.com/a/66484496/13747848

注意： 请注明原答辩人！

---

如果您不希望使用任何捆绑工具，则需要提供 node_modules 中的 lodash 文件夹的路径，相对于您有 import 语句的 javascript 文件。

如果您不想使用捆绑器，也值得从特定文件导入您需要的功能。例如：

import _each from '../node_modules/lodash/each'

原答案：https://***.com/a/52558858/13747848

注意： 请注明原答辩人！

【讨论】：

非常感谢。 1) 关于引用的原始答案：我不通过 NuGet 使用 javascript 文件。我正在通过 npm 使用。 chrome中的错误也不是404，而是关于模块的。该文件在 CDN 中可用，这不是问题。 2）关于tsconfig中的@types：编译器成功找到了类型，所以这不是问题。 3）关于 ES5：我想在 ES6 中使用 import/export，不想在 ES5 中使用 require

添加了更多信息，如果有用请告诉我

...在发布我的问题之前，我已经阅读了该内容。那里接受的答案是包容性的，请在那里阅读它的 cmets：最后的状态，OP 出错了。从接受的答案中直接复制到此处“我尝试使用您的建议来导入 lodash，但这给了我以下错误：“SyntaxError: The requested module '../node_modules/lodash/lodash.js' does not provide an export named 'default '" 这正是我的问题，请阅读我的 OP

True.. 没有注意这一点，因为它被接受了。 Welp ..我试过了:((如果我发现了什么，我会更新我的答案

可能不是您要找的答案，但可能有用：dmnsgn.medium.com/…