javascript - ts-node 支持 '@' 样式导入吗？如果可以的话，该如何设置呢？

Question

我正在创建一个命令行脚本，使用主 Express 应用程序中的类。

脚本位于文件夹中:

bin/utils/
├── sync-buyers.ts
└── tsconfig.json

主要的 Express 应用程序在 /app 中使用 import '@/foo/bar/thing。

这是在主应用程序的tsconfig.json中设置的，如下所示:

"paths": {
        "@/*": ["*"],
        "*": [
            "node_modules/*",
            "app/typings/*"
        ]
    }
},
"include": ["app/**/*", "test/**/*"],
"exclude": ["app/**/*.test.ts", "/__tests__/", "/__mocks__/", "/__snapshots__/", "app/**/__mocks__/"],
"files": ["typings/global.d.ts"]

脚本执行

我正在测试是否可以从主应用程序导入，因此我创建了一个 sayHello() 函数。

#!/usr/bin/env ts-node
/* tslint:disable */

import { sayHello } from '../../app/services/v2/oapp';
sayHello();

当我运行它时:

TSError: ⨯ Unable to compile TypeScript:
../../app/services/v2/oapp.ts(9,19): error TS2307: Cannot find module 
'@/helpers/fetch'.
../../app/services/v2/oapp.ts(10,31): error TS2307: Cannot find module 
'@/services/v2/buyer'.
../../app/services/v2/oapp.ts(11,51): error TS2307: Cannot find module 
'@/http/HttpHeader'.

摘要:

ts-node 支持“@”样式导入吗？如果是这样，我该如何设置？

Answer 1

因此，TypeScript paths 配置仅适用于 TypeScript 的类型解析和检查，这意味着它将允许 TypeScript 仅出于类型检查的目的理解这些导入，但它生成的代码不会'不会自动将这些导入重写到正确的位置。

有两种常见的方法可以解决此问题:

1. 更新节点解析器以了解 TypeScript paths 配置。生成的文件仍将通过@名称引用这些路径。

   最常见的是 tsconfig-paths模块就是用于此目的。您可以直接从 node 命令要求该模块:

   node -r tsconfig-paths/register main.js
   

2. 重写生成的文件，以便将@名称替换为“真实”本地相对路径位置。

   有一个独立的模块可以实现此目的，tspath - 您只需在编译 TypeScript 后运行 tspath，它就会使用正确的路径更新生成的文件。

   如果您使用 Webpack，还可以使用 tsconfig-paths-webpack-plugin ，它将负责配置 Webpack 的解析器以正确定位那些 @-name 路径。

   最后，如果您使用 Babel，您可能会对 babel-plugin-module-resolver 感兴趣。它对 Babel 工具链做了类似的事情，但是这里的缺点是它不会从 tsconfig.json 读取 paths 配置，所以你基本上必须复制你的 <此插件的 alias 配置中的 code>paths 配置。

如果这是直接使用 tsc 和 tsconfig-paths-webpack-plugin< 编译的 Node 脚本或服务器，我个人会推荐 tsconfig-paths/code> 如果这是前端 Webpack 构建。