TypeScript多模块单入口编译为浏览器单文件及System/AMD相关问题

为什么会出现Unable to resolve specifier 'index'错误？ #

你遇到的这个报错，核心原因是SystemJS默认会尝试从网络或本地文件系统加载模块，但你把编译后的System.register代码直接内嵌在同一个<script>标签里时，SystemJS无法识别到这个模块已经注册在当前页面的上下文中。

当你用--module System --outFile编译时，TypeScript会把所有依赖的模块都包裹在System.register调用中，包括你的入口index模块。但如果这些注册代码和System.import写在同一个script标签里，SystemJS在执行import的时候，可能还没完成模块的注册，或者它根本不会去扫描当前script里的注册代码。

快速解决方法 #

最稳妥的修复方式是把编译后的bundle保存成单独的.js文件，再通过script标签引入，比如：

1. 编译命令：tsc --module System --outFile bundle.js index.ts（假设你的入口是index.ts）
2. 修改HTML：

<!doctype html>
<html>
<head>
<title>TypeScript System Bundle</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.7/system.js"></script>
<!-- 先引入bundle，让SystemJS注册所有模块 -->
<script src="./bundle.js"></script>
</head>
<body>
<script>
// 现在SystemJS能找到已注册的index模块了
System.import("index").then(function (m) { new m.run(); });
</script>
</body>
</html>

如果非要内嵌代码，你可以把System.register的代码单独放在一个<script>标签里（确保在System.import之前执行），不过这种方式不如单独文件引入稳定，不推荐在生产环境使用。

AMD和System哪个更适合你的需求？ #

针对你"仅用TypeScript编译器生成单个浏览器可运行bundle"的需求，两者都能满足，但各有优劣：

关于AMD #

• 优点：是老牌的浏览器模块规范，生态成熟，很多旧的JavaScript库都支持AMD；搭配RequireJS（AMD加载器）使用时，配置相对简单。
• 缺点：语法相对繁琐，不支持ES模块的现代特性（比如顶层await、动态导入），灵活性不如System。
• 使用方式：编译命令用tsc --module AMD --outFile bundle.js，HTML里引入RequireJS，然后通过require(['index'], m => new m.run())加载入口。

关于System #

• 优点：是ES模块的超集，支持所有ES模块特性，还兼容CommonJS、AMD等其他规范；SystemJS作为加载器，对现代浏览器的兼容性更好，未来如果要迁移到原生ES模块也更顺畅。
• 缺点：相对AMD来说，生态稍新，但SystemJS已经是非常成熟的工具，完全能满足生产需求。
• 使用方式：就是你现在尝试的方案，修复报错后就能正常运行，而且支持更多高级特性。

选型建议 #

如果你的项目不需要兼容特别旧的环境，也没依赖只能用AMD的老库，优先选System + SystemJS，它的灵活性和未来兼容性更好。如果是维护旧项目，或者必须依赖AMD生态的库，再考虑AMD。

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