Javascript 为带有裸ES模块的浏览器编译带有TypeScript的模块

我正在尝试将TypeScript代码编译成JavaScript，以便在

index.html

中使用它，如下所示

<script type="module">
    import('./dist/base.js').then(module => {
        const instance = new module.MyClass();
        ...
    }
</script>

它就像一个符咒。然而，我的情况是一个复杂的问题，我有两个问题

它都是用TypeScript编写的，没有编译成正确的格式

我还从“节点\模块”导入库

问题1）：当我运行

tsc

时，它会产生以下输出

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class MyClass {}
exports.default = MyClass;

下面是我对

tsconfig.json

"compilerOptions": {
    "target": "ESNEXT", 
    "module": "commonjs",
    "lib": ["es2015", "dom"], 
    "outDir": "./dist",
     "strict": true,   
     "moduleResolution": "node"
}

但是我尝试了更多的

target

s和

module

s

<强>问题2）< /强>：忽略问题1）考虑下面的

    import { magic } from 'magic';

    export MyClass {
         doMagic() { return magic() }
    }

它编译为

    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const magic_1 = require("magic");
    class MyClass {
        doMagic() { magic_1() }
    }

    exports.default = MyClass

浏览器无法解析

require（“magic”）

。我认为

tsc

应该内联该脚本，我不知道，但这不会起作用

---

因此，也许我在

tsconfig.json

中的一个或多个

tsc

选项上做错了什么，或者我还需要其他工具（babel/webpack）。任何帮助都将不胜感激

你看过了吗？我觉得你提到的帖子是关于导入文件的文件扩展名的（我必须说这也很有趣！）

    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const magic_1 = require("magic");
    class MyClass {
        doMagic() { magic_1() }
    }

    exports.default = MyClass