Node.js 中使用 TypeScript 的路径别名

这篇文章最初发表在我的博客上。

几天前，我在我的 TypeScript Node.js 项目中添加了路径别名。我认为它们能让代码看起来更简洁，所以我想向你展示如何在项目中设置它们。

问题

在 Node.js（或者一般的 TS/JS）中，你可以将单个模块导入到代码中。
代码可能如下所示：

import { User } from '../../user/model';
import { Article } from '../../article/model';

import { Cache } from '../../../../cache';
import { MongoDB } from '../../../../mongodb';

注意到这些点（'../'）来访问上层模块了吗？

我们这里遇到的问题是，项目树越深，访问更高层的模块就需要越多的“../”。说实话，这看起来不太美观。好在我们可以改变这种情况。

解决方案：路径别名

什么是路径别名？

在 TypeScript 中，你可以借助路径别名来避免这些看起来“糟糕”的导入。使用路径别名，你可以声明映射到应用程序中某个绝对路径的别名。

下面是一个简单的例子：

import { User } from '@modules/user/model';
import { Article } from '@modules/article/model';

import { Cache } from '@services/cache';
import { MongoDB } from '@services/mongodb';

在这种情况下，我们的两个别名是

• @modules 映射到 './src/rest/modules'
• @services 映射到 './src/services'

设置

让我们开始设置一些路径别名。注意，我不会解释如何在 Node.js 中设置 TypeScript 项目。我假设你已经这样做了。

假设我们有以下项目结构：

folder structure
└───src
   │
   └───rest
   │   │
   │   └───modules
   │   │   │
   │   │   └───article
   │   │   │
   │   │   └───user
   │   │
   │   │   server.ts
   │
   │
   └───services
   │   │    cache.ts
   │   │    mongodb.ts
   │    
   │   index.ts

步骤 1：更新 tsconfig.json

首先，我们必须在 tsconfig 文件中声明路径别名

"baseUrl": "./src",
"paths": {
    "@modules/*": ["rest/modules/*"],
    "@services/*": ["services/*"]
}

现在，您可以在应用程序中使用新的路径别名来导入模块。如果您的 IDE（在我的情况下是 VSC）或编译代码时出现任何错误，请重试。

然而，我们还没有完成。当你尝试将 TS 代码编译成 JS 时，你不会看到任何错误。但是，一旦你运行编译后的 JS 代码，你就会收到一个错误：

例如：

Error: Cannot find module '@modules/user'

这是因为 JS 无法解析声明的路径别名的模块。

步骤 2：安装 module-alias 包

接下来，我们将安装一个名为module-alias的 npm 包

npm i --save module-alias

此模块在编译后的 JS 文件中注册路径别名。因此，我们需要对 package.json 进行一些修改：

"_moduleAliases": {
    "@modules": "dist/rest/modules",
    "@services": "dist/services"
  }

请注意，“dist”是编译后的 JS 文件所在的文件夹。

最后但同样重要的是，我们必须在应用程序中注册路径别名。
在启动文件的顶部添加以下行：

import 'module-alias/register';

最后，当您编译并执行代码时，您不应该看到任何导入错误。

您可以在这里找到我目前正在进行的副项目中路径别名的一些示例。