上海网站建设哪家专业,单页销售型网站,旅游网站建设分析 需求,台州哪里做网站需求说明
虽然 TypeScript 的在线 Playground 很方便 https://www.tslang.com.cn/play/#xff0c;但毕竟是在浏览器中使用#xff0c;没有本地的 IDE 那么顺手。所以我想搭建一个本地类似 Playground 的环境#xff0c;这样在学习 TypeScript 的过程中#xff0c;可以更方…
需求说明
虽然 TypeScript 的在线 Playground 很方便 https://www.tslang.com.cn/play/但毕竟是在浏览器中使用没有本地的 IDE 那么顺手。所以我想搭建一个本地类似 Playground 的环境这样在学习 TypeScript 的过程中可以更方便地编写一些简单的示例代码.
具体有以下三点需求
使用 WebStorm 编辑代码因为这是我最熟悉的环境. 编辑中的文件可以实时提示 TypeScript 的语法错误. 工程中的 TypeScript 文件编辑保存后可以自动触发工程主文件 index.ts 的执行.
本地环境
系统mac mini M2 14.5 (23F79) IDE WebStorm 2024.1.5 终端iterm2 3.5.3
方案选型
使用npm创建一个简单的nodejs工程基于 ts-node nodemon来实现 ts-node-dev的说明
ts-node 是一个 TypeScript 执行引擎和 REPLRead-Eval-Print Loop环境用于 Node.js。它允许你在 Node.js 环境中直接运行 TypeScript 代码而无需事先将代码编译成 JavaScript
。以下是 ts-node 的一些主要功能和特点功能
即时编译JITts-node 在运行时将 TypeScript 代码即时转换为 JavaScript这样你可以在 Node.js 中直接执行 TypeScript 文件
。
REPL 支持它提供了一个交互式的命令行环境允许你输入和执行 TypeScript 代码
。
模块解析通过挂钩 Node.js 的模块加载 APIts-node 能够无缝地与其他 Node.js 工具和库一起使用
。
源码映射在错误堆栈中自动提供源码映射方便调试
。
使用场景
快速原型开发由于不需要编译步骤ts-node 适合快速开发和测试原型
。
脚本工具开发可以用于编写构建任务、测试脚本等利用 TypeScript 的类型系统提高代码的可靠性
。
Node.js 应用开发在大型项目中使用 ts-node 可以加速开发和调试过程nodemon 是一个用于 Node.js 应用程序的开发工具它会监视你指定的文件或目录中的任何更改并在检测到更改时自动重启应用程序。这使得开发过程更加高效因为你不需要手动停止和启动应用程序来加载最新的代码更改。功能
自动重启当你的代码文件发生变化时nodemon 会自动重启应用程序无需手动干预.
灵活的配置可以通过配置文件或命令行参数来指定要监视的文件、目录、忽略的文件等.
支持多种运行环境可以与各种 Node.js 运行环境结合使用如 node、ts-node 等.
日志输出提供详细的日志输出帮助你了解应用程序的启动和重启过程.
使用场景
开发 Node.js 应用程序在开发过程中使用 nodemon 可以节省大量的时间提高开发效率.
快速迭代适合需要频繁更改代码并测试的应用程序开发如 Web 应用、API 服务等.
操作步骤
第一步用npm创建一个空的工程(npx tsc --init这步很关键需要好ts的编译配置)
mkdir demo
cd demo
npm init -y
npx tsc --init
npm install ts-node nodemon --save-dev用Webstorm打开工程并创建src目录跟index.ts文件 第二步配置与启动 配置nodemon 创建一个nodemon.json文件来配置nodemon使其监视src目录下的文件变化并使用ts-node运行index.ts。
{watch: [src],ext: ts,exec: ts-node src/index.ts
}更新package.json中的脚本 添加一个新的脚本来使用nodemon监视和运行index.ts文件。
说明
nodemon.json:
watch: 指定监视的目录这里是src。
ext: 指定监视的文件扩展名这里是ts。
exec: 指定执行的命令这里是使用ts-node运行src/index.ts。
package.json:
dev: 添加了一个新的脚本dev使用nodemon来监视和运行index.ts文件。在终端启动 编辑代码后commad s自动运行完美
