返回顶部
首页 > 资讯 > 精选 >如何使用vs2022在.net6中调试带typescript的静态页面
  • 440
分享到

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

2023-06-22 04:06:35 440人浏览 八月长安
摘要

小编给大家分享一下如何使用vs2022在.net6中调试带typescript的静态页面,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1、新建一个空的WEB项目2、设计、建好目录结构其中ts存放typescript源文件,

小编给大家分享一下如何使用vs2022在.net6中调试带typescript的静态页面,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

1、新建一个空的WEB项目

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

2、设计、建好目录结构

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

其中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

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

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>

运行结果:

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

看完了这篇文章,相信你对“如何使用vs2022在.net6中调试带typescript的静态页面”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网精选频道,感谢各位的阅读!

--结束END--

本文标题: 如何使用vs2022在.net6中调试带typescript的静态页面

本文链接: https://lsjlt.com/news/302539.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 使用vs2022在.net6中调试带typescript的静态页面
    1、新建一个空的web项目 2、设计、建好目录结构 其中ts存放typescript源文件,web为网站根目录,scripts/js存放ts生成的js脚本。 index.html...
    99+
    2024-04-02
  • 如何使用vs2022在.net6中调试带typescript的静态页面
    小编给大家分享一下如何使用vs2022在.net6中调试带typescript的静态页面,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1、新建一个空的web项目2、设计、建好目录结构其中ts存放typescript源文件,...
    99+
    2023-06-22
  • 如何在PHP中实现静态页面动态化?
    随着互联网用户对于网页内容呈现的要求越来越高,动态页面技术已经成为了网页开发的标配。在一些较为简单的网站中,我们可以使用一些框架或者CMS系统来进行网站开发,实现快速开发并且轻松实现动态页面效果。不过一些小型的静态网站则需要手动实现动态化,...
    99+
    2023-05-23
    PHP缓存 PHP静态化 动态化页面
  • 如何在PHP中实现页面静态化
    实现页面静态化是提高网站性能的重要方法之一。在PHP中实现页面静态化可以减少数据库和服务器的负担,加快页面加载速度,提升用户体验。本文将从什么是页面静态化、为什么做页面静态化、以及如何...
    99+
    2024-03-05
    php页面静态化 静态化实现方法 php静态化技术 搜索引擎优化
  • django如何使用apache2提供静态页面
    这篇文章给大家分享的是有关django如何使用apache2提供静态页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。最近有些初学django的人反映,apache部署实现是太难了,小编在刚学习这部分内容的时候也...
    99+
    2023-06-14
  • 如何在 Linux 中使用动态和静态库
    本篇内容介绍了“如何在 Linux 中使用动态和静态库”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!了解 Linux 如何使用库,包括静态库...
    99+
    2023-06-15
  • 如何使用webstrom调试Vue.js单页面程序
    这篇文章将为大家详细讲解有关如何使用webstrom调试Vue.js单页面程序,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言使用 webstrom 调试 Vue.js...
    99+
    2024-04-02
  • 如何在javascript中使用静态方法
    这篇文章将为大家详细讲解有关如何在javascript中使用静态方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript的特点1.JavaScript主要用来向HTML页面添加...
    99+
    2023-06-14
  • 如何在java中使用静态方法
    如何在java中使用静态方法?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表,实现了面向...
    99+
    2023-06-14
  • 如何在Python中使用静态变量在计数
    今天,在用Python写一个统计一个文件下有多少文件的小标本时,遇到了一个很棘手的问题。如何在Python中使用静态变量来计数。然后,就在网上一通查找,找的方法都是利用类的方法来实现静态变量。说实话没有看太懂,另外我想如果用类成员当做静态...
    99+
    2023-01-31
    变量 静态 如何在
  • 如何在PHP项目中实现数据缓存和页面静态化?
    如何在PHP项目中实现数据缓存和页面静态化?随着互联网的快速发展,网站访问量不断增加,如何提高网站的性能成为了开发人员共同面临的问题。在PHP项目中,数据缓存和页面静态化是两种常见的性能优化方法。本文将介绍如何在PHP项目中实现数据缓存和页...
    99+
    2023-11-02
    - PHP (编程语言) 数据缓存: - Cache (缓存) - Implementation (实现) 页面静态化:
  • 关于如何在Python中使用静态、类或
    Python中方法的工作方式方法是存储在类属性中的函数,你可以用下面这种方式声明和访问一个函数 >>> class Pizza(object): ... def __init__(self, size):...
    99+
    2023-01-31
    静态 如何在 Python
  • 如何优化PHP开发中的缓存和页面静态化
    随着互联网的快速发展,网站的访问量越来越大,访问速度成为用户体验的重要因素之一。而对于PHP开发来说,缓存和页面静态化是提高网站性能的重要手段。本文将介绍如何优化PHP开发中的缓存和页面静态化,同时给出具体的代码示例。缓存的作用和种类缓存是...
    99+
    2023-10-21
    缓存(Cache) 优化(Optimize) 静态化(staticization)
  • 在HTML页面中如何使用React
    这篇文章主要介绍了在HTML页面中如何使用React的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇在HTML页面中如何使用React文章都会有所收获,下面我们一起来看看吧。该方案使用场景:在html页面中使用r...
    99+
    2023-06-29
  • 关于如何在Python中使用静态、类或抽
    方法是存储在类属性中的函数,你可以用下面这种方式声明和访问一个函数 >>> class Pizza(object): ... def __init__(self, size): ......
    99+
    2023-01-30
    静态 如何在 Python
  • 如何在python中使用Birdseye调试工具
    这篇文章将为大家详细讲解有关如何在python中使用Birdseye调试工具,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Birdseye是一个Python调试器,它在函数调用中记录表达式的...
    99+
    2023-06-15
  • 如何在Unity3D中使用单例模式和静态类
    本篇文章为大家展示了如何在Unity3D中使用单例模式和静态类,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。静态类不能继承和被继承!(严格点说是只能继承System.Object)也就是说你的静态类...
    99+
    2023-06-14
  • 静态导入机制如何在java项目中使用
    这篇文章给大家介绍静态导入机制如何在java项目中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。java中静态导入机制用法实例详解静态常量类在java开发中,我们会经常用到一些静态常量用于状态判断等操作。为了能够在...
    99+
    2023-05-31
    java 静态导入机制 ava
  • IDEA中的静态分析工具如何使用
    IDEA中的静态分析工具可以帮助开发人员发现代码中的潜在问题,提高代码质量。以下是在IDEA中使用静态分析工具的一般步骤: 打开...
    99+
    2024-04-03
    IDEA
  • 了解如何使用快速静态相对定位,提高页面布局的灵活性
    快速静态相对定位(Fast Static Relative Positioning)是一种用于网页布局的技术,可以使页面的元素在不同设备、分辨率和浏览器中展示一致的效果。它通过设置元素的位置属性来实现,可以让页面布局更加灵活自如...
    99+
    2024-01-18
    快速 静态 相对
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作