TypeScript导入：加载资源失败（404）

我正在编写我的第一个typescript文件，我对包导入有问题

我想在我的项目中使用的包名为

libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "showdown@1.9.1",
      "destination": "wwwroot/lib/showdown/"
    }
  ]
}

Snowdown文件通过libman下载到wwwroot

我的site.ts文件看起来像

import { showdown } from "../lib/showdown/showdown";

function ConvertMarkdownToHtml(markdown) {
    var converter = new showdown.Converter({ tables: true, strikethrough: true });
    var html = converter.makeHtml(markdown);
    return html;
}

我通过模块类型的脚本标记将底层的site.js文件导入到网页中

以下更改不会引发任何错误

import * as showdown from "../lib/showdown/showdown";

export function ConvertMarkdownToHtml(markdown) {
    var converter = new showdown.Converter({ tables: true, strikethrough: true });
    var html = converter.makeHtml(markdown);
    return html;
}

---

但是我如何从html文件中调用

convertmarkdowntotohtml

？

在谷歌搜索了一段时间后，您似乎无法全局使用模块导入，因此您尝试过以下方法：

@section Scripts {
    <script type="module">
        import { ConvertMarkdownToHtml } from '~/js/site.js';

        // Do the logic here using ConvertMarkdownToHtml
    </script>
}

@节脚本{
从“~/js/site.js”导入{ConvertMarkdownToHtml}；
//使用ConvertMarkdownToHtml执行此处的逻辑
}

我遵循@Paul Louis Mas的回答，并给出了提示

index.html

@section Scripts {

    <script src="~/lib/showdown/showdown.min.js"></script>
    
    <script type="module">
         import { ConvertMarkdownToHtml } from "./dist/site.js"
    
         var html = ConvertMarkdownToHtml('...');
    </script>

它是有效的：-）

• declare var摊牌：any

  是如何使用外部js库而不解决无数编译错误的关键。缺点是我们没有这种方式可用的intellisense

---

哪个文件会导致404？是site.js吗？你是怎么建造的？要在浏览器中使用此功能，您需要使用类似webpack或browserify的内容构建应用程序。@derpirscher您是对的，它是

site.js

。我用

site.ts

中的错误消息更新问题。typescript是在visual studio的.net核心项目中生成的，我没有进行任何配置。但似乎默认配置包含

es5

作为目标（当我通过向导添加

tsconfig.json

时）。您需要阅读您尝试使用的包的文档。似乎它不会导出您试图从中导入的成员。您可以尝试从“./lib/shodown/shodown”导入决战，或从“…”@derpirscher导入*作为决战，是的，我现在想：-）

导入*作为决战从“…”

似乎起作用，我还将

export

关键字添加到

ConvertMarkdownToHtml

函数中，但我仍然不知道如何调用该函数？@Muflix我认为您不需要将

export

添加到

ConvertMarkdownToHtml

函数中，因为它被编译为

.js

文件（然后使用页面上HTML中的

脚本

标记引用），您只需调用页面内的函数，它就应该正常工作（如果

.ts

文件的编译成功）。谢谢你的提示，但它只能部分起作用。我现在收到一个错误

uncaughttypeerror:无法设置未定义的属性“shodown”

。我还尝试从“./lib/jQuery/dist/jQuery.js”中将jQuery

import*作为$导入

当我尝试使用它时，它说

$不是一个函数

，所以我可能对模型解析有问题。如果我尝试

“./lib/jquery/dist/jquery”

或

“jquery”

路径，错误是相同的，但我三次检查了正确的位置。如果我尝试一些自定义类，例如

从导入{Greeter}“/greeter.js”导出函数convertmarkdowntothtml（markdown）{let greeter=new greeter（“world”）；alert（greeter.greet（））}

有效！问题似乎只存在于外部js包（如

jQuery

或

shodown

）。啊，可能是因为包的方式（如shodown和jQuery）导出时，可能他们不使用

导出

，因为您使用的是要使用

窗口加载的浏览器版本。决战

或

窗口。$

。可能他们的网站上有一个使用

导出

的模块

@section Scripts {
    <script type="module">
        import { ConvertMarkdownToHtml } from '~/js/site.js';

        // Do the logic here using ConvertMarkdownToHtml
    </script>
}

@section Scripts {

    <script src="~/lib/showdown/showdown.min.js"></script>
    
    <script type="module">
         import { ConvertMarkdownToHtml } from "./dist/site.js"
    
         var html = ConvertMarkdownToHtml('...');
    </script>

declare var showdown: any;
export function ConvertMarkdownToHtml(markdown) {
    var converter = new showdown.Converter({ tables: true, strikethrough: true });
    var html = converter.makeHtml(markdown);
    return html;
}