如何将带导入模块的TypeScript转译为浏览器兼容JS文件

核心需求是把TS代码转译并打包所有依赖（包括node_modules）成自执行的IIFE格式，无需浏览器模块支持即可运行。以下是两种高效可行的方案：

方案一：使用Vite（推荐，适合有扩展需求的项目） #

Vite基于Rollup，配置简单且打包速度快，适合处理TS+第三方依赖的打包场景。

1. 初始化项目（若未初始化）

npm init -y

2. 安装必要依赖

npm install -D vite typescript @types/bootstrap

• @types/bootstrap用于让TypeScript识别Bootstrap的类型定义

3. 添加tsconfig.json配置

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

4. 添加vite.config.ts配置（启用库模式打包IIFE）

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/main.ts', // 你的入口文件路径
      name: 'MyPopoverInit', // 全局变量名（可选）
      formats: ['iife'],
      fileName: () => 'main.js',
    },
    rollupOptions: {
      // 不排除任何依赖，将所有node_modules内容打包进去
      external: [],
    },
  },
});

5. 调整文件结构
   将main.ts、example.ts放到src目录下（保持导入路径正确）

6. 执行打包

npx vite build

打包完成后，dist/main.js就是可直接在浏览器使用的文件，通过<script src="dist/main.js"></script>引入即可。

方案二：使用esbuild（轻量快速，适合极简场景） #

esbuild是极速的JS/TS打包工具，无需复杂配置，一行命令即可完成打包。

1. 安装依赖

npm install -D esbuild typescript @types/bootstrap

2. 直接执行打包命令

npx esbuild src/main.ts --bundle --format=iife --outfile=dist/main.js --loader:.ts=ts

• --bundle：打包所有依赖
• --format=iife：生成自执行函数格式
• --loader:.ts=ts：处理TypeScript文件

生成的dist/main.js可直接在浏览器中通过script标签引入。

注意事项 #

你的示例代码中存在一个语法错误：popoverList.foreach应改为popoverList.forEach（forEach的首字母F需大写），否则运行时会抛出undefined is not a function错误。

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