TypeScript转译ES6类代码浏览器报错，求无需额外转译方案

先从你遇到的核心报错说起，再逐个拆解你的疑问：

一、target:"es5"转译代码的预期使用场景 #

target: "es5"的核心作用是把TS/ES6+语法转换成IE等旧浏览器能识别的ES5代码，但它默认并不是为浏览器直接运行设计的——当你没指定module配置时，TypeScript会根据target自动选择模块系统：target: es5时默认用CommonJS模块（也就是生成exports/require这类Node.js环境的语法）。

它的预期使用场景主要是：

• Node.js环境运行的代码（Node原生支持CommonJS）
• 配合Webpack、Rollup这类打包工具使用，打包工具会把CommonJS模块转换成浏览器能识别的无模块或ES模块代码
• 配合RequireJS这类模块加载器在浏览器中加载，需要额外配置

二、无需额外转译步骤，交付ES6风格TS到浏览器的方案 #

TypeScript本身没有platform:"browser"这类直接指定运行平台的配置，但可以通过调整tsconfig.json的模块相关配置实现直接在浏览器运行，不需要额外转译工具：

方案1：用ES模块输出，直接通过浏览器模块脚本引入 #

修改你的tsconfig.json：

{
  "compilerOptions": {
    "target": "es5", // 兼顾旧浏览器兼容性
    "module": "es2015", // 输出ES模块语法（import/export）
    "moduleResolution": "node", // 保留Node风格的模块解析逻辑
    "jsx": "react", // 如果你用到React JSX的话
    "strict": true
  }
}

然后在HTML中用type="module"引入转译后的JS文件：

<script type="module" src="./dist/App.js"></script>

这里要注意：ES模块在浏览器中要求文件路径是完整的（必须加.js后缀），所以你的TS导入语句也要写全后缀，比如把import Home from './pages/Home'改成import Home from './pages/Home.js'——这也是你之前设module:"es2015"出现TS2307错误的原因，我后面会详细解释。

方案2：用UMD模块输出，兼容多环境 #

如果要兼容不支持ES模块的旧浏览器，可以把module设为umd：

{
  "compilerOptions": {
    "target": "es5",
    "module": "umd",
    "jsx": "react",
    "strict": true
  }
}

UMD模块会自动判断运行环境：在Node中用CommonJS，在浏览器中会挂载到全局变量，也可以配合RequireJS使用。

RequireJS适配TS生成代码的启动方式 #

如果想用RequireJS加载TS生成的代码，需要把TS的模块系统改成AMD（因为RequireJS是AMD加载器）：

1. 修改tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "jsx": "react",
    "strict": true
  }
}

2. 在HTML中引入RequireJS并指定入口文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" data-main="./dist/App.js"></script>

RequireJS会自动加载你的入口文件，处理AMD模块的依赖关系。

三、为什么"module":"es2015"会导致TS2307找不到模块？ #

你可能以为module配置只影响输出代码的格式，但实际上TypeScript的模块解析逻辑会和module配置绑定：

• 当module设为CommonJS（target:es5时的默认值），TS采用Node.js的模块解析规则——允许省略.js/.ts后缀，还会自动查找目录下的index.ts。
• 当module设为es2015时，TS会采用ES模块的解析规则，而浏览器环境的ES模块要求必须使用完整的文件路径（包括后缀），所以TS会检查你的导入语句是否有完整后缀，没有的话就抛出TS2307错误。

解决方法就是在导入时加上.js后缀（注意是.js不是.ts，因为转译后的文件是JS），比如：

// 原写法
import Home from './pages/Home';
// 修改后
import Home from './pages/Home.js';

这样TS能正确解析模块，转译后的ES模块也能在浏览器中正常加载。

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