Question

场景：

我正在使用TypeScript（版本> = 3）开发脚本。我的脚本具有依赖于众所周知的图形库的功能，而该图形库本身是用JavaScript编写的。我已经在我的项目中本地安装了该库及其TypeScript类型定义，从而将相关文件放置在“ node_modules”目录的相应子目录中。

我设置了项目，以将TypeScript转换为 ES6 规范的JavaScript。

我的主要TypeScript文件顶部有一个import语句，形式为：

import * as LIB from 'library'

其中“ library.js”是必需的库文件，埋在“ node_modules”子目录中的某个位置。 TypeScript编译器有其自己的复杂过程module resolution，这意味着它可以查找此文件而无需相对文件路径或文件扩展名。

如果在主“ .ts”文件上运行TypeScript编译器，则会得到一个JavaScript文件。因为我使用的是ES6，所以生成的JavaScript文件中的import语句与我的TypeScript源代码中的完全相同。这是我的问题。

在本地开发服务器上运行时，脚本无法找到所生成的JavaScript尝试导入的文件，因为它试图导入的文件位于“ node_modules”目录中，并且导入未指向到该目录。这样，执行代码时，浏览器控制台中会显示Error resolving module specifier一行错误。

我希望将代码从TypeScript转换为JavaScript（ES6），以便当我将代码从本地测试服务器提供给浏览器时，可以解决生成的JavaScript中的导入。

问题：

1）这种行为是我不正确配置TypeScript编译器的结果吗？

2）此行为是由“ tsconfig.json”和/或“ package.json”配置文件中的属性直接导致还是受到其影响？

3）这实际上是一个问题，还是全部是由于我不了解应如何从Node服务器组织和提供文件而引起的？

预先感谢您的帮助。

Answer 1

虽然您说“在基于节点的服务器上”运行代码，但错误消息表明您实际上正在向浏览器提供包含诸如import * as LIB from 'library'之类的非相对导入的ES6模块。正如您建议的那样，不支持此操作，因为浏览器中非相对导入的解析算法尚未标准化；例如，参见this article。您可能需要一个单独的工具来将非相对导入重写为相对导入（我对此类工具不熟悉，但会邀请其他人在其他答案中对其进行描述），或者您需要从浏览器本机模块切换到非本地module bundler or loader，例如Webpack，Rollup，Browserify或RequireJS，其中任何一种都应支持您的方案。

Answer 2

在撰写本文时，如果不使用@Matt McCutchen建议的模块捆绑器或加载器，似乎无法（以一般方式）解决我的问题。以下是TypeScript GitHub页面上有关该问题的一些讨论：1，2。

对于以后发现此问题的其他人，我在特定情况下以非常不令人满意的方式解决了该问题-通过完全避免使用导入，并在加载我的主要依赖脚本之前简单地将所需的库加载到HTML脚本标签中。这仅是可以接受的，因为我的项目有一个不会被更新的依赖项（因此，我将不必手动更改script标记中的“ src”）。

我再次强调，这在一般情况下不是令人满意的解决方案，因此，如果有人想出更好的答案，我将暂时搁置这个问题。

在TypeScript

2 个答案: