为什么无法使用TypeScript转译生成的JavaScript代码？

1. 你当前tsconfig配置的target为ES5，且未显式指定module字段，TS默认会将代码转译为CommonJS模块格式，用到的require、exports等语法浏览器原生ES模块加载器无法识别，因此直接报错。
2. 即便配置输出ES模块，浏览器加载ES模块要求导入路径必须携带完整.js后缀，TS默认转译不会自动补全该后缀，也会触发路径找不到的错误。
3. 如果你直接通过本地文件协议打开HTML，浏览器的安全策略会阻止模块加载，必须通过HTTP服务访问页面。

方案1：无构建工具，直接运行原生ES模块 #

• 修改tsconfig.json配置，调整模块输出格式为ES模块：

{
  "compilerOptions": {
    "target": "ES2020", 
    "module": "ESNext",
    "moduleResolution": "NodeNext",                       
    "outDir": "./dist", 
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,          
    "strict": true,                                    
    "skipLibCheck": true                               
  }
}

• 所有TS文件中的导入语句手动补充.js后缀，例如导入utils.ts需要写成import { xxx } from './utils.js'，TS会自动匹配对应TS源文件，转译后路径也符合浏览器加载要求。
• 启动本地静态服务访问页面，可使用VS Code的Live Server插件，或在项目根目录执行npx serve，通过服务返回的本地地址访问页面即可。

方案2：使用构建工具（推荐日常开发使用） #

无需手动处理模块兼容、路径补全这类底层问题，直接使用前端构建工具即可：

1. 执行命令创建TS项目：npm create vite@latest ts-demo -- --template vanilla-ts
2. 进入项目目录安装依赖：cd ts-demo && npm install
3. 启动开发服务：npm run dev，直接编写TS代码即可，构建工具会自动完成转译、模块加载等处理。
4. 生产环境打包执行npm run build，即可输出可直接部署的静态文件。

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