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"
    ]
}

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

import { Foo } from 'foobar/Foo'

而不是相对路径

import { Foo } from './Foo'

如果我的理解是正确的，那么打字稿编译器应该能够在编译foobar/Foo时自动解析./Foo到Bar.ts。

import { Foo } from 'foobar/Foo';

export class Bar {
  foo: Foo;

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

运行tsc编译没有错误。然而，当我们实际查看已编译的Bar.js时，我们会看到路径未正确解析，如果我们要运行它，会给我们一个无法找到模块错误。

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

所以我的问题是：在使用tsc导入模块时，如何让baseUrl正确解析绝对路径？或者，如果这不是可以做的事情，那么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仅在您在编辑器中进行编码以减少代码时有用。如果您希望它能够正常工作，则可以使用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

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

4 个答案: