在TypeScript中导入本地安装的节点模块

Question

场景：

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

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

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

import * as LIB from 'library'

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

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

当脚本在我的本地开发服务器上运行时，脚本无法找到生成的JavaScript尝试导入的文件，因为它试图导入的文件位于“ node_modules”目录内，并且导入未指向该目录。 这样，执行代码时，浏览器控制台中会显示Error resolving module specifier的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模块提供服务，该import * as LIB from 'library'到浏览器。 正如您建议的那样，不支持此操作，因为浏览器中非相对导入的解析算法尚未标准化； 参见例如本文 。 您可能需要一个单独的工具来将非相对导入重写为相对导入（我对此类工具不熟悉，但会邀请其他人在其他答案中对其进行描述），或者您需要从浏览器本机模块切换到非本地模块捆绑程序或加载程序，例如Webpack，Rollup，Browserify或RequireJS，其中任何一种都应支持您的方案。

Answer 2

在撰写本文时，似乎不使用@Matt McCutchen建议的模块捆绑器或加载器就无法解决（通常）我的问题。 这里有一对夫妇的打字稿GitHub的页面上的问题的讨论： 1 ， 2 。

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

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