javascript - 在 TypeScript 中导入本地安装的 Node 模块

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 文件中的导入语句与我的 TypeScript 源代码中的相同。这是我的问题。

生成的 JavaScript 试图导入的文件在我的本地开发服务器上运行时无法被脚本找到，因为它试图导入的文件在“node_modules”目录中的某个地方并且导入没有指向到那个目录。因此，执行代码时，浏览器控制台中会显示类似Error resolving module specifier 的错误。

我希望代码从 TypeScript 转换为 JavaScript (ES6)，这样当我从本地测试服务器向浏览器提供代码时，可以解析生成的 JavaScript 中的导入。

问题:

1) 此行为是我不正确配置 TypeScript 编译器的结果吗？

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

3) 这实际上是一个问题，还是因为我不了解应该如何组织文件并从 Node 服务器提供服务？

预先感谢您的帮助。

Answer 1

虽然您说您正在“在基于 Node 的服务器上”运行代码，但您的错误消息表明您实际上正在提供一个包含非相对导入的 ES6 模块，例如 import * as LIB from 'library' 到浏览器。正如您所建议的，这不受支持，因为浏览器中非相对导入的解析算法尚未标准化；参见，例如，this article .要么您需要一个单独的工具将非相对导入重写为相对导入(我不熟悉此类工具，但会邀请其他人在其他答案中描述它们)或者您需要从浏览器 native 模块切换到非本地人 module bundler or loader例如 Webpack、Rollup、Browserify 或 RequireJS，其中任何一个都应该支持您的场景。