如何将TypeScript文件编译为可直接引入HTML的单JS文件

嘿，作为刚从JS转TS不久的过来人，完全懂你想要直接把编译后的JS挂到HTML里用的需求！给你两个亲测有效的方案，帮你搞定：

这是我最常用的方式，既能保留ES模块的导入导出习惯，又能让编译后的代码直接在浏览器跑：

1. 配置tsconfig.json
   新建或修改你的tsconfig.json，指定编译为IIFE格式，同时输出单个文件：

   {
     "compilerOptions": {
       "target": "ES5", // 兼容绝大多数浏览器
       "module": "IIFE", // 编译成立即执行函数，避免模块语法报错
       "outFile": "./dist/bundle.js", // 输出到指定的单文件
       "strict": true, // 新手开启严格模式能少踩很多坑
       "esModuleInterop": true // 解决模块导入的兼容性问题
     },
     "include": ["src/**/*"] // 假设你的所有.ts文件都在src目录下
   }
   

2. 在main.ts里暴露全局成员
   把你需要在HTML里直接调用的类或方法挂载到window对象上：

   import { User } from './User';
   import { Product } from './Product';
   
   // 把类暴露到全局，这样HTML里就能直接new User()
   (window as any).User = User;
   (window as any).Product = Product;
   
   // 还可以在这里写页面初始化逻辑，比如DOM加载完成后执行
   window.addEventListener('DOMContentLoaded', () => {
     const testUser = new User('Obaid');
     console.log(testUser.sayHello());
   });
   

3. 编译并引入HTML
   运行tsc命令编译，然后在HTML里直接引入生成的bundle.js：

   <script src="dist/bundle.js"></script>
   

   这样打开HTML就能直接用，完全不需要任何前置的import操作！

如果你觉得模块导入有点繁琐，也可以用TS的命名空间来组织代码，编译后自动成为全局可用的代码：

1. 用命名空间写类文件
   比如User.ts：

   namespace MyApp {
     export class User {
       name: string;
       constructor(name: string) {
         this.name = name;
       }
       sayHello() {
         return `Hi, I'm ${this.name}!`;
       }
     }
   }
   

   其他类文件也按这个格式写，用namespace包裹，export需要暴露的类。

2. 在main.ts里引用并初始化
   用/// <reference path="xxx.ts" />来引入其他文件，然后直接使用命名空间里的类：

   /// <reference path="./User.ts" />
   /// <reference path="./Product.ts" />
   
   // 直接使用命名空间中的类
   const testProduct = new MyApp.Product('TS入门指南');
   console.log(testProduct.getInfo());
   
   // 也可以把整个命名空间挂到window，方便HTML调用
   (window as any).MyApp = MyApp;
   

3. 编译引入
   运行tsc --outFile dist/bundle.js main.ts，然后在HTML里引入bundle.js，就能直接用MyApp.User啦！

• 别用<script type="module">引入，虽然支持ES模块，但需要服务器环境（不能直接打开本地HTML文件），而且不符合你“无需import前置”的需求。
• 不管用哪种方案，记得给window挂载成员时用(window as any)，避免TS类型报错。

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