使用 baseUrl 导入模块时如何让 tsc 解析绝对路径？

Question

考虑一个具有以下目录结构的简单打字稿项目：

|   package.json
|   tsconfig.json
|               
\---src
    |   app.ts
    |   
    \---foobar
            Foo.ts
            Bar.ts

tsconfig.json 已配置为使 ./src/ 成为 baseUrl。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "./dist/",
        "baseUrl": "./src/"
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

现在假设我们要在Bar.ts 中导入Foo。我的理解是通过设置baseUrl，我们现在可以使用绝对路径来导入模块

import { Foo } from 'foobar/Foo'

相对于相对路径

import { Foo } from './Foo'

如果我的理解是正确的，typescript编译器应该可以在编译Bar.ts时自动将foobar/Foo解析为./Foo。

import { Foo } from 'foobar/Foo';

export class Bar {
  foo: Foo;

  constructor(num: number) {
    this.foo = new Foo(num);
  }
}

运行tsc 编译没有错误。然而，当我们实际查看编译后的Bar.js 时，我们会发现路径没有被正确解析，如果我们要运行它，这会给我们一个找不到模块错误。 p>

"use strict";
const Foo_1 = require("foobar/Foo");
class Bar {
    constructor(num) {
        this.foo = new Foo_1.Foo(num);
    }
}
exports.Bar = Bar;

所以我的问题是：在使用baseUrl 导入模块时，如何让tsc 正确解析绝对路径？或者如果这不是可以做到的，那么baseUrl的目的是什么？

Answer 1

答案来自@DenisPshenov 在其中一个答案中的评论。它被埋了，所以我会在这里提供它......

使用NODE_PATH 环境变量告诉Node 基本url 在哪里，以便它可以解析绝对路径：

Linux / macOS

NODE_PATH=dist/ node ./dist/index.js

Windows Powershell

$env:NODE_PATH="dist/"
node ./dist/index.js

Answer 2

问题是你的模块加载器不知道如何找到给定绝对路径foobar/Foo的模块。

TypeScript 编译器 (tsc) 正在正确解析模块路径，否则会出现编译错误。但它相信您可以适当地配置您的模块加载器。

例如，来自documentation for RequireJS：

支持的配置选项：

baseUrl：用于所有模块查找的根路径。

TypeScript documentation 谈到了您可能需要 baseUrl 的原因：

使用 baseUrl 是使用 AMD 模块加载器的应用程序的常见做法，其中模块在运行时“部署”到单个文件夹。这些模块的源代码可以位于不同的目录中，但构建脚本会将它们放在一起。

Answer 3

tsc 无法将路径转换为相对路径，尽管您配置了 baseUrl 和 paths，paths 仅在您在编辑器中编码以 lint 代码时才有用。 如果你想让它工作，你可以使用 ts-node 和 tsconfig-paths 模块：

$ yarn add ts-node tsconfig-paths --dev

然后运行这个脚本

"start": "ts-node -r tsconfig-paths/register app.ts"

然后你可以得到正确的表演。

Answer 4

你可以使用 tsconfig 的path：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
        "app/*": ["app/*"],
        "config/*": ["app/_config/*"],
        "environment/*": ["environments/*"],
        "shared/*": ["app/_shared/*"],
        "helpers/*": ["helpers/*"],
        "tests/*": ["tests/*"]
    },
}

在这种情况下，您可以告诉 TypeScript 文件解析器支持 用于查找代码的自定义前缀数量。该模式可用于 避免在您的代码库中使用较长的相对路径。

https://www.typescriptlang.org/tsconfig