0

I want to import a function from a typescript-generated module into javascript's global namespace. Here is my typescript module foo.ts:

export const fooFn = (): string => {
  return "hello";
};

Here is my HTML file:

<html>
<body>
    <script src="foo.ts"></script>
    <script type="application/javascript">
        window.fooFn = require("./foo.ts").fooFn;
        alert(fooFn());
    </script>
</body>
</html>

This is giving me the error Cannot find module './foo.ts'. After messing around a bit, I've found I can import it using a parcel-generated index (eg, window.fooFn = require(7).fooFn) but obviously this is not a workable solution, and the index changes every time I restart the parcel dev server.

So, my question is, how can I import this module by name?

Here is my tsconfig.json for reference:

{
  "compilerOptions": {
    "strict": true,
    "target": "es2015",
    "jsx": "react",
  }
}

If you're wondering why I want to expose this function on the global namespace, it's so that I can easily access it from within a WebAssembly application.

w.brian
  • 16,296
  • 14
  • 69
  • 118

1 Answers1

0

This is still an unsolved issue.

Until TypeScript supports a dedicated compilation target you're only options to use a module bundler.

The most popular ones these days are webpack, rollup or parcel.

marvinhagemeister
  • 2,801
  • 1
  • 22
  • 27