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

【问题标题】：Importing Locally Installed Node Modules in TypeScript在 TypeScript 中导入本地安装的节点模块
【发布时间】：2018-09-24 17:28:33
【问题描述】：

场景：

我正在使用 TypeScript（版本 >= 3）开发一个脚本。我的脚本具有依赖于一个著名的图形库的功能，该库本身是用 JavaScript 编写的。我已经在我的项目中本地安装了这个库及其 TypeScript 类型定义，导致相关文件被放置在“node_modules”目录的适当子目录中。

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

我在表单的主要 TypeScript 文件的顶部有一个导入语句：

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 服务器组织和提供文件？

提前感谢您的帮助。

【问题讨论】：

它应该可以正常工作，但要避免 * 导入，除非库作为 ESM 提供。无论如何，很容易测试这个问题。 1：> node 2：var lib = require("library"); console.table(lib);

标签： javascript node.js typescript

【解决方案1】：

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

【讨论】：

感谢您的回复。您说我正在为浏览器提供 ES6 模块，而不是在服务器上运行它是正确的。我已经编辑了我的问题以澄清这一点。也感谢您对捆绑器和装载机的建议。不过，理想情况下，我试图在我的工作流程中使用尽可能少的额外工具。

【解决方案2】：

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

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

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

【讨论】：