I am facing an issue with my files a.ts and b.ts. Here is the code for a.ts:
function abc(){
alert("abc()")
}
export {abc}
And here is the code for b.ts:
import * as a from "./a"
a.abc();
After compiling it using the following tsconfig.json:
{
"compilerOptions": {
"module": "umd",
"sourceMap": false,
"moduleResolution": "node",
"declaration": false,
"outDir": "./outDir"
},
"files": [
"b.ts",
"a.ts"
],
}
I get a.js and b.js like this:
(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;
function abc() {
alert("abc()");
}
exports.abc = abc;
});
b.js looks like this:
(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();
});
Lastly, I wrote a test file named index.html:
<html>
<head>
<script type="text/javascript" src="./b.js"></script>
</head>
<body></body>
</html>
However, nothing seems to work. Shouldn't the UMD module be working in the browser?