搭建一个简单的ts小工程

最新推荐文章于 2023-07-06 09:38:03 发布
最新推荐文章于 2023-07-06 09:38:03 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HzjCsdn/article/details/112172611
版权

环境准备

第一步：执行命令创建工程，选择任意目录

mkdir HelloWorld
cd ./HelloWorld
mkdir src
mkdir bin
cnpm install glup
cnpm install browserify vinyl-source-stream tsify
cnpm install typescript
code .

第二步：安装调试插件
在这里插入图片描述目录结构如下：
在这里插入图片描述

使用 browserify source tsify 整合ts代码

流程就是写ts代码，使用browserify source tsify整合为一个js文件，再用html启动这个js文件，就是这么easy
新建bin/helloweb.html

<!DOCTYPE html>
<html>
    <head><title>TypeScript Hello Web</title></head>
    <body>
        <script src="js/bundle.js"></script>
    </body>
</html>

新建/.vscode/gulpfile.js

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var workSpaceDir = "../";
//使用browserify，转换ts到js，并输出到bin/js目录
gulp.task("compile", function () {
	return browserify({
		basedir: workSpaceDir,
		//是否开启调试，开启后会生成jsmap，方便调试ts源码，但会影响编译速度
		debug: true,
		entries: ['./src/Main.ts'],
		cache: {},
		packageCache: {}
	})
		//使用tsify插件编译ts
		.plugin(tsify)
		.bundle()
		//使用source把输出文件命名为bundle.js
		.pipe(source('bundle.js'))
		//把bundle.js复制到bin/js目录
		.pipe(gulp.dest(workSpaceDir + "/bin/js"));
});

gulp.task("default",gulp.series('compile'))

新建/.vscode/task.json

{
	"version": "2.0.0",
	"tasks": [
		// {
		// 	"type": "typescript",
		// 	"tsconfig": "tsconfig.json",
		// 	"problemMatcher": [
		// 		"$tsc"
		// 	],
		// 	"group": {
		// 		"kind": "build",
		// 		"isDefault": true
		// 	},
		// 	"label": "tsc: build - tsconfig.json"
		// }
		{
			"label": "compile",
			"type": "shell",
			"group": "build",
			"command": "gulp",
			"options": {
				"cwd": "${workspaceFolder}/.vscode"
			  }
		},
	]
}

新建/.vscode/launch.json
type：就是debugger工具的类型，每一个安装好的调试插件都有自己的类型。比如说node调试工具的type就是node，同理php调试工具的type就是php，我们安装的Debugger for Chrome的type就是chrome。
request：可以理解为调试工具的启动方式，目前官网提供两种，launch和attach，翻译过来就是“启动”和“附加”。就是直接启动或者挂载到进程启动，稍后在插件配置中再详细说明两种方式的差别。
name：给调试器起一个名字，这个可以自己随便写，就是调试器启动以后最下面显示的名字。
preLaunchTask：控制台启动一次调试之前需要执行的任务，可以把任务命令写到 文件夹中的 文件，在调试器启动前会先执行这些任务。
postDebugTask：跟上面差不多，不同的是结束后执行。
runtimeExecutable：指明chrome.exe所在路径（也可以不设置，会自动寻找）
internalConsoleOptions：控制调试台的标签是否在调试过程可见。
port：当调试工具需要挂载到进程的时候，就要配置端口号了。
sourceMaps:是否生成断点映射，它会在你的代码上加上一段base64编码的代码，但光加上这句话是无法完成调试的，还必须指明调试映射路径
sourceMapPathOverrides:指明调试路径，非常重要，如果想在ts中进行调试，务必设置源代码ts路径
trace：生成一个vscode启动工程的日志，输出文件可以在控制台找到文件存放的位置

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "${workspaceFolder}/bin/helloweb.html",
        "webRoot": "${workspaceFolder}",
        "trace":true,
        "sourceMaps": true,
        //务必加上
        "sourceMapPathOverrides": {
            "src/*": "${workspaceRoot}/src/*"
        },
        "preLaunchTask": "compile"
      }
    ]
  }

新建tsconfig.json

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "outDir": "bin/js",
      "sourceMap": true
    },
    "exclude": [
        "node_modules"
      ]
  }

OK,到此为止一个ts工程就算搭建好了

这一生只吹边疆的风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ts项目构建
weixin_54986082的博客
04-22 821
通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。
数据库的最简单实现（转）
summer85的博客
07-04 1490
  原文：http://www.ruanyifeng.com/blog/2014/07/database_implementation.html 有应用软件之中，数据库可能是最复杂的。 MySQL的手册有3000多页，PostgreSQL的手册有2000多页，Oracle的手册更是比它们相加还要厚。 但是，自己写一个最简单的数据库，做起来并不难。Reddit上面有一个 帖子 ，只用了几...
搭建ts项目
FormAda的博客
09-03 1019
创建项目 创建文件夹，复制以下文件： package.json: { "name": "03", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "start": "webpack serve --open chr
TypeScript - 笔记(1) - 创建基本的ts项目
King Saj
02-07 1820
创建基本的ts项目 新建test 文件夹,创建index.html, min.ts文件 终端使用 tsc min.ts 命令,将.ts文件,转换为.js 文件 点击vscode终端管理器 // 创建 package.json 文件 npm init 安装 lite-server 轻量级的仅适用于开发 的 node 服务器， 它仅支持 web app, 它能够为你打开浏览器, 当你的html或是JavaScript文件变化时，它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CS
新建一个ts 项目
最新发布
wbskb的博客
07-06 582
typescript是 微软公司开源的编程语言， type是 类型的意思，表示在js的基础之上提供了强类型支持。
Angular2使用Angular CLI快速搭建工程（一）
08-30
【Angular CLI快速搭建Angular2工程】Angular CLI是一个强大的命令行工具，用于简化Angular2应用程序的构建过程。通过它，开发者可以快速地初始化、构建、测试和部署Angular2项目，极大地提高了开发效率。Angular ...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Angular2使用Angular-CLI快速搭建工程（二）
11-30
首先，我们要了解Iconfont，这是一个由阿里巴巴提供的图标服务。它包含大量的图标资源，支持CDN访问，因此加载速度快且使用便捷。尽管Iconfont本质上是通过引用字体文件来显示图标，但不论你是使用Bootstrap图标还是...
ts前端工程案例模板作为之后工程的起步脚手架
08-10
标题中的“ts前端工程案例模板作为之后工程的起步脚手架”表明这是一个使用TypeScript（简称ts）作为主要编程语言的前端项目模板，用于快速搭建新的React应用。TypeScript是JavaScript的一个超集，提供了静态类型、...
ts项目搭建
Acitylion的博客
06-04 1313
1.项目初始化 npm init -y 2.下载配置文件 npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin @babel/core @babel/preset-env babel-loader core-js 3.创建一个webpack.config.js //引入 const path = require('path'); /.
ts：ts项目
02-07
这是由提供支持的工作流存储库，是从 :chequered_flag: 入门 构建Actionsflow工作流分为三个步骤： 通过此创建公共的Github存储库。 典型的Actionsflow存储库结构如下所示： ├── .github │ └── workflows │ └── actionsflow.yml ├── .gitignore ├── README.md └── workflows │ └── rss.yml │ └── webhook.yml └── package.json 在workflows目录中定义您的 典型的工作流程文件rss.yml如下所示： on : rss : url : https://hnrss.org/newest?points=300&count=3 jobs : request : name : Make a HTTP
TypeScript (ts) 工程化最全安装教程
提莫拌一团蘑菇
07-18 1196
一、安装流程： sudo npm install -g typescript tsc --init npm init npm i webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin 二、详解： 1. 使用NPM 全局安装 TypeScript // Windows npm install -g typescript // Macos sudo npm install ..
Ts构建前端工程
weixin_44593999的博客
07-22 521
1.初始化项目 npm init 2.初始TS tsc init 3.卸全局ts-node npm uninstall -g ts-node 4将ts-node安装到局部 npm install -D ts-node 5卸载全局的 typescript npm uninstall -g typescript 6将 typescript 安装到局部 npm install -D typescript 7配置文件的启动项 8安装SuperAgent软件 作用:是处理 get,post,put,d
要不要学一下更高效地 TS 构建方式（工程引入）
iamxuqianqian的博客
04-22 377
工程引入是 TypeScript 3.0 的新特性，它支持将 TypeScript 程序的结构分割成更小的组成部分。 这样可以改善构建时间，强制在逻辑上对组件进行分离，更好地组织你的代码。 TypeScript 3.0 还引入了 tsc 的一种新模式，即 --build 标记，它与工程引入协同工作可以加速 TypeScript 的构建。 背景 有时候，我们会把多个需要单独构建的工程放在一个代码仓库中。比如现在有一个全栈项目： --src |--client |--index.ts |--
【Ts】tsconfig.json、package.json、强制编译ts工程
两水先木示的博客
09-09 2160
执行 npm run build 会进行执行 scripts 下的 "build"命令，而"npm run build"可封装成一个bat文件，例如 build.bat ，直接执行 ./build 即可执行编译指令。其中tsconfig.json中compilerOptions里的几个参数会影响比较大。使用 tsc -init 生成tsconfig.json 配置说明如下。使用 npm init 生成 pakcage.json 配置如下。上面2个影响编译出的js规范。
0. 简单搭建一个 ts 开发模板
舜岳的博客
11-01 741
全局 typescript 编译TS文件 npm install typescript -g 全局安装typescript可以对.ts文件进行编译 tsc --init # 生成tsconfig.json tsc # 可以将ts文件编译成js文件 tsc --watch # 监控ts文件变化生成js文件 搭建ts开发模板 目录结构： ├── build ├── src │ └── index.ts ├── public │ └── index.html ├── rollup.config.j
【typescript】 安装 TS 命令 、Vite 创建 TS Vue 项目命令
m0_64494670的博客
02-26 300
【typescript】 安装 TS 命令 、Vite 创建 TS Vue 项目命令
Create React App
baidu_27448251的博客
08-13 100
开始 命令窗口，进入你要放置工程的目录 npx create-react-app my-app cd my-app npm start 打开http://localhost:3000/看一下你的项目。 要是创建TS版的： npx create-react-app my-app --template typescript 还可以设置包管理器 npx create-react-app my-app --use-npm 命令： 启动项目 npm start 打包：npm run bui.
Vite配置Vue3 + TS项目工程实践
小陈的博客
09-29 3993
难点、重点知识视频教程（全套
帮我搭建一个简易的小程序
03-23
好的，我可以为您提供一些搭建小程序的建议和指导，您需要选择一个适合您的开发平台，例如微信小程序、支付宝小程序、百度智能小程序等。然后，您需要学习相关的开发技术和语言，例如JavaScript、CSS、HTML等。最后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值