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

Question

上下文

• 我的 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"
  }
}

Answer 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://stackoverflow.com/a/43513137/13747848

注意： 请注明原答辩人！

---

编辑

对于错误

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

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

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

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

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

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

1. 完整的非相对 URL。
2. 以 / 开头。
3. 以./.开头
4. 以 ../. 开头

还有javascript.info：

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

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

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

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

注意： 请注明原答辩人！

---

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

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

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

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

注意： 请注明原答辩人！