如何从Javascript中按名称导入Typescript生成的模块？

Question

I want to import a function from a typescript-generated module into javascript's global namespace. 我想将一个由打字稿生成的模块中的函数导入到javascript的全局命名空间中。 Here is my typescript module foo.ts : 这是我的打字稿模块foo.ts ：

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

Here is my HTML file: 这是我的HTML文件：

<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' . 这给了我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. 经过一番混乱之后，我发现我可以使用包裹生成的索引（例如， window.fooFn = require(7).fooFn ）将其导入，但是显然这不是可行的解决方案，并且每次我更改索引重新启动包裹开发服务器。

So, my question is, how can I import this module by name? 因此，我的问题是，如何按名称导入此模块？

Here is my tsconfig.json for reference: 这是我的tsconfig.json供参考：

{
  "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. 如果您想知道为什么要在全局名称空间中公开此函数，那么我可以从WebAssembly应用程序中轻松访问它。

Answer 1

This is still an unsolved issue . 这仍然是一个未解决的问题 。

Until TypeScript supports a dedicated compilation target you're only options to use a module bundler. 在TypeScript支持专用的编译目标之前，您只能选择使用模块捆绑程序。

The most popular ones these days are webpack , rollup or parcel . 这些天最流行的是webpack ，汇总或包裹。

如何从Javascript中按名称导入Typescript生成的模块？

问题描述

1 个解决方案

解决方案1
0 2018-02-07 20:34:48

如何从Javascript中按名称导入Typescript生成的模块？

问题描述

1 个解决方案

解决方案1 0 2018-02-07 20:34:48

解决方案1
0 2018-02-07 20:34:48