TypeScript编译完成可在浏览器运行的实用工作流有哪些？

最优方案：基于 Vite 的热更新工作流 #

这是目前前端开发TS项目的主流选择，完全匹配你提出的所有要求：

操作流程 #

1. 项目初始化时在vite.config.ts中一次性注册所有HTML入口，示例配置参考：

import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        page1: './page1.html',
        page2: './page2.html',
        // 所有入口一次性添加完成，后续无需修改配置
      }
    }
  }
})

2. 终端执行vite命令启动本地开发服务器，保持进程后台运行
3. 在IDE中编辑TS代码，IDE自动保存后，Vite会自动完成增量编译
4. 浏览器侧操作：
   • 正在预览的页面会自动触发热更新，不需要手动刷新，直接展示最新代码效果
   • 要切换其他入口页，直接在浏览器地址栏修改对应HTML路径即可，比如从http://localhost:5173/page1.html切换到http://localhost:5173/page2.html，无需任何额外操作

优势匹配说明 #

• 无陈旧代码风险：Vite只有编译完成后才会推送更新到浏览器，编译过程中不会替换运行中的代码，完全不会出现加载旧代码的情况
• 手动步骤极少：除了首次启动服务的命令外，后续开发全程无需额外操作，编辑代码后自动同步效果
• 多入口切换成本为0：所有入口一次性配置完成后，直接在浏览器侧即可切换，不需要修改任何配置文件
• 跨平台稳定：Vite完全兼容Mac、Windows系统，运行稳定无兼容性问题

轻量替代方案：tsc + browser-sync 组合 #

如果你不需要使用构建工具，只做纯原生TS开发，可以选择这套方案：

操作流程 #

1. 终端同时启动两个监听进程：
   • 执行tsc --watch监听TS文件变更，自动编译输出JS文件
   • 执行browser-sync start --server --files "*.js, *.html"启动本地服务，监听编译后的JS和HTML文件变更
2. 编辑TS代码保存后，tsc自动完成编译，browser-sync检测到JS文件变化后自动刷新浏览器，无需手动操作

优势 #

不需要引入额外构建工具，配置简单，同样满足你提出的所有要求，跨平台稳定运行。

内容的提问来源于stack exchange，提问作者Sam Reid