TSConfig设为ES3仍生成system.register的解决方法及相关疑问

嘿，我来帮你拆解这个问题，你遇到的核心点是TypeScript里target和module两个配置项的区别，这也是很多开发者容易混淆的地方～

为什么会生成system.register？ #

首先要明确：target和module是完全独立的配置：

• target控制的是TypeScript将代码转换为哪个ES版本的语法（比如把箭头函数、let/const转成ES3兼容的写法）；
• module控制的是TypeScript如何处理你的模块（import/export），生成哪种模块加载格式（比如CommonJS、AMD、System、ESNext等）。

你之前虽然把target设为了ES3，但如果module选项默认是System（或者你没显式设置，TypeScript根据环境自动选了System），编译器就会生成system.register的模块包装代码，这就必须依赖SystemJS才能运行，所以才会出现System is not defined的错误。

怎么修复TSConfig设ES3但仍生成system.register的问题？ #

要彻底摆脱对SystemJS的依赖，你需要调整module配置，改成适合ES3/老浏览器的模块方案：

方案1：禁用模块系统（推荐，适配老浏览器） #

如果你的代码不需要模块化（或者可以改成全局变量的方式），直接把module设为None，这样TypeScript不会生成任何模块包装代码，直接输出全局脚本：

{
  "compilerOptions": {
    "target": "ES3",
    "module": "None", // 关键配置：禁用模块系统
    "outFile": "./dist/bundle.js", // 可选：把所有代码打包成单个文件
    "strict": true // 保留你的其他严格模式配置
  }
}

然后把原来的import/export改成全局变量的方式，比如挂载到window对象上（Opera 11支持window）：

// 原来的导出：export const initApp = () => {};
window.initApp = function() {
  // 这里写业务逻辑，TypeScript会自动转成ES3兼容的语法
};

编译后的代码就不会有system.register了，直接在Opera 11里引入脚本就能运行，不需要额外依赖。

方案2：改用UMD模块（如果需要保留模块化） #

如果你必须保留模块化，可以把module设为UMD，它会生成兼容全局、AMD、CommonJS的代码，老浏览器可以直接以全局脚本的方式加载：

{
  "compilerOptions": {
    "target": "ES3",
    "module": "UMD",
    "outFile": "./dist/bundle.js"
  }
}

这种方式下，你依然可以用import/export，编译后的代码会自动判断环境，如果没有模块加载器，就会把导出的变量挂到全局对象上。

总结 #

核心就是区分target和module的职责：target管语法兼容性，module管模块加载方式。要兼容Opera 11这种老浏览器，最好的方式是禁用模块系统，改用全局变量，避免引入额外的模块加载器依赖。

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