Question

我有一个名为a.ts的文件，如下所示：

function abc(){
    alert("abc()")
}

export {abc}

还有另一个名为b.ts的文件，如下所示：

import * as a from "./a"

a.abc();

我用tsconfig.json的以下语言进行了编译：

{
    "compilerOptions": {
        "module": "umd",
        "sourceMap": false,
        "moduleResolution": "node",
        "declaration": false,
        "outDir": "./outDir"
    },
    "files": [
        "b.ts",
        "a.ts"
    ],
}

然后我得到a.js：

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports"], factory);
    }
})(function (require, exports) {
    "use strict";
    exports.__esModule = true;
    function abc() {
        alert("abc()");
    }
    exports.abc = abc;
});

b.js看起来像这样：

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./a"], factory);
    }
})(function (require, exports) {
    "use strict";
    exports.__esModule = true;
    var a = require("./a");
    alert("b.ts");
    a.abc();
});

然后我编写了一个简单的测试文件index.html：

<html>
    <head>
        <script type="text/javascript" src="./b.js"></script>
    </head>
    <body></body>
</html>

没有任何效果。 UMD模块不应该在浏览器中工作吗？

Answer 1

根据生成的代码，我认为它只有在您在浏览器中添加支持requirejs模块的amd才能起作用，因为上述生成的umd不支持标准的umd，例如：https://github.com/umdjs/umd/blob/master/templates/commonjsStrict.js#L28

总而言之，如果您在上面生成的代码中添加https://requirejs.org/，则可能会起作用。

但是在大多数使用情况下，为了在浏览器中发挥最佳效果，建议使用webpack将事物组合在一起

打字稿无法编译为UMD模块

1 个答案: