使用vs2022在.net6中调试带typescript的静态页面

更新时间：2021年12月22日 15:40:13 作者：万金流

这篇文章介绍了使用vs2022在.net6中调试带typescript的静态页面，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1、新建一个空的web项目

2、设计、建好目录结构

其中ts存放typescript源文件，web为网站根目录，scripts/js存放ts生成的js脚本。

index.html为静态网页。

3、新建ts配置文件tsconfig.json，修改内容为：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "web/scripts/js"//ts编译出js的输出目录
  },
  "include": ["ts/**/*"],//ts所在位置。“**/”为任意层级目录，“？”和“*”为一般通配符。
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

4、修改program.cs，指定web文件夹，并支持静态内容。

//var builder = WebApplication.CreateBuilder(args);
var builder = WebApplication.CreateBuilder(new WebApplicationOptions
{
    WebRootPath = "web"//网站根目录
});
var app = builder.Build();
app.UseDefaultFiles();//支持默认文件（index.html）
app.UseStaticFiles();//启用静态文件支持
//app.MapGet("/", () => "Hello World!");

app.Run();

5、写一个简单的ts文件f1.ts

document.getElementById('s1').innerHTML="I'm comming...."

其实这里是简单的js内容而已

6、编译之后，会生成js

7、index.html内容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    aaa<span id="s1"></span>
    <script src="/scripts/js/f1.js"></script>
</body>
</html>

运行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

C#使用正则表达式实例
正则表达式（regular expression）是用来快速、高效地处理文本数据的工具。被处理的文本可以小到一个电子邮件地址，也可以大到一个多行文本输入框中的文本数据。正则表达式不仅可用来确认一段文本是否与一个预定义的模式相匹配，还可以用于从文本中抽取符合某一模式的数据。
2008-04-04
ASP.NET Session使用详解
Session是什么呢？简单来说就是服务器给客户端的一个编号。当一台WWW服务器运行时，可能有若干个用户浏览正在运正在这台服务器上的网站。
2009-02-02
ASP.Net生成一个简单的图片
ASP.Net生成一个简单的图片...
2006-10-10
ASP.NET中 ObjectDataSource控件的DataObjectTypeName属性
本文主要介绍ObjectDataSource控件和DataObjectTypeName属性的用法，希望能给小伙伴们一些帮助。
2016-04-04
ASP.Net页面生命周期与Page_Load方法的工作原理介绍
这篇文章介绍了ASP.Net页面生命周期与Page_Load方法的工作原理，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
使用Docker部署ASP.NET Core程序
这篇文章介绍了使用Docker部署ASP.NET Core程序的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
.net6引入autofac框架
这篇文章介绍了.net6引入autofac框架的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
详解ABP框架中Session功能的使用方法
ABP(ASP.NET Boilerplate Project)是基于ASP.NET框架的一个Web开发框架,这里我们来详解ABP框架中Session功能的使用方法,需要的朋友可以参考下
2016-06-06
解析ABP框架领域层中的实体类与仓储类
基于ASP.NET的ABP框架遵循DDD领域驱动设计,其中就有一个领域层的概念,这里我们就来解析ABP框架领域层中的实体类与仓储类:
2016-06-06
.Net结构型设计模式之组合模式（Composite）
这篇文章介绍了.Net结构型设计模式之组合模式（Composite），文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05