TypeScript转ES模块失败：浏览器无法识别导出的master类问题

此前通过自研JS加载机制按需加载单文件，头部用带SHA256校验的小型loader加载主控脚本，现在计划：

• 切换为ES模块（原有脚本无法加载ES模块格式的第三方库）
• 引入TypeScript

当前可用的加载脚本：

<!-- 嵌入页面的loader代码 -->
<html>
    ...
    <script async type=module>
        "use strict";
        import {master} from '/scripts/modules/master-28021723540.js';
        new master();
    </script>
    ...
</html>

TypeScript源码：

// /master.ts
export class master {
    constructor() {
        this.init();
    }

    async init() {
        console.log( "Hello, lets get started...");
    }
}

遇到的编译问题：

1. 使用命令/usr/bin/tsc --alwaysStrict --strict --module amd --target es2020 源文件 --outfile 目标文件编译后，生成AMD模块代码，浏览器报错：Uncaught SyntaxError: The requested module '/scripts/modules/master-28021723540.js' does not provide an export named 'master'
2. 改用命令/usr/bin/tsc --alwaysStrict --strict --target es6 源文件 --outfile 目标文件，编译后代码无导出；保留export class时，报错：Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'

核心需求：

• 不使用tsc --watch监控整个项目，仅在请求线程中编译单个JS/TS文件生成静态优化文件（生产环境），追求极致页面加载速度
• 编译后的代码能被现有ES模块loader正确导入并调用master类

1. 基础方案：直接编译为原生ES模块 #

浏览器原生支持ES模块（对应type="module"脚本），而--outFile仅对AMD/System模块生效，ES模块模式下仅单个文件编译时可使用该选项。

使用以下命令编译：

/usr/bin/tsc --alwaysStrict --strict --module es2020 --target es2020 --outFile /scripts/modules/master-28021723540.js 源文件/master.ts

编译后生成的标准ES模块代码如下，可被浏览器正确识别：

"use strict";
export class master {
    constructor() {
        this.init();
    }
    async init() {
        console.log("Hello, lets get started...");
    }
}

2. 优化方案：单文件编译+ES模块打包（减少HTTP请求） #

如果需要将master.ts及其依赖合并为单个ES模块文件（进一步提升加载速度），可以使用轻量打包工具esbuild替代tsc，它更适合生产环境单文件编译场景：

1. 全局安装esbuild：

npm install -g esbuild

2. 执行编译打包命令：

esbuild 源文件/master.ts --bundle --format=esm --target=es2020 --outfile=/scripts/modules/master-28021723540.js

该命令会将源码及依赖打包为单个ES模块文件，同时保留正确的导出结构，浏览器可直接通过import {master}导入使用。

关键注意事项 #

• 必须指定--module es2020（或更高版本），不要用amd，因为浏览器原生不支持AMD模块
• ES模块模式下，--outFile仅支持单个文件编译，多文件合并需用打包工具
• 保持HTML中的script type="module"配置不变，确保浏览器以ES模块方式加载脚本

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