TypeScript 后端开发中的热重载编译处理

在一些除了nest框架外的一些其他nodejs框架中没有提供对ts编译和热重载,如果使用typescript我们需要自己进行配置。

方法一(推荐)

使用bun运行环境(快)。注:一些不是使用js,ts代码编写的第三方包,可能会有兼容性问题。

复制代码
bun run --hot index.ts

构建为js代码

复制代码
bun build index.ts --target node --outdir ./dist

编译成可执行文件

复制代码
bun build --compile --minify index.ts --outfile ./dist/web

方法二(推荐)

使用deno运行环境(安全) 。deno2.x和bun有同样兼容性问题,deno1.x兼容性更差。

复制代码
deno run --allow-net --watch ./src/index.ts 

编译成可执行文件

复制代码
deno compile --output ./dist/app --allow-net --allow-read ./src/index.ts

方法三(推荐)

使用 ts-node-dev,npm i ts-node-dev安装。

复制代码
ts-node-dev --respawn --transpile-only src/index.ts

方法四

使用tsc配置增量编译,配合concurrently 实现。

tsconfig.json

复制代码
{
  "compilerOptions": {
    "target": "es2016", // 输出目标 JavaScript 版本
    "module": "CommonJS", // 使用 ES 模块
    "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
    "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
    "lib": [
      "ES2016",
      "DOM"
    ],
    "moduleResolution": "node", // 使用 Node.js 模块解析策略
    "outDir": "./dist", // 输出目录
    "rootDir": "./src/", // TypeScript 源代码目录
    "baseUrl": "./", // 设置模块解析的基本路径
    "resolveJsonModule": true, // 支持导入 JSON 文件
    // "emitDeclarationOnly": false, // 只生成声明文件
    "allowJs": true, // 允许导入 JS 文件
    "checkJs": true,
    "sourceMap": true,
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true, // 支持与 CommonJS 模块互操作
    "strict": true, // 启用严格模式
    "listEmittedFiles": true, // 打印输出文件
    "listFiles": true,
    "declaration": false, 
    "composite": false, // 启用增量构建
    "incremental": true, // 启用增量编译
    "tsBuildInfoFile": "./.tsbuildinfo", // 增量编译信息文件
    "skipLibCheck": true, // 跳过库类型检查
    "forceConsistentCasingInFileNames": true, // 强制文件名大小写一致
    "paths": {
      "*": [
        "node_modules/*"
      ] // 配置模块路径
    }
  },
  "include": [
    "src/**/*" // 包含所有 src 目录下的文件
  ],
  "exclude": [
    "node_modules" // 排除 node_modules 目录
  ]
}

package.json

复制代码
"a": "concurrently \"npm run c\" \"npm run n\"",
"c": "tsc --watch",
"n": "nodemon --exec node ./dist/bin/www.js --watch ./src --ext ts --legacy-watch",

其它方法

也可以使用webpack、vite、gulp等一些构建工具实现,不是很推荐。

相关推荐
Zacks_xdc10 分钟前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|18 分钟前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊20 分钟前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
张迅之1 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin111 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
蔗理苦2 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro3 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹3 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript