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

anauzrmj  于 2023-02-10  发布在  TypeScript
关注(0)|答案(5)|浏览(501)

考虑一个具有以下目录结构的简单 typescript 项目:

|   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'

如果我的理解正确的话,在编译Bar.ts时,typescript编译器应该能够自动将foobar/Foo解析为./Foo

import { Foo } from 'foobar/Foo';

export class Bar {
  foo: Foo;

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

运行tsc编译时没有错误,然而,当我们实际查看编译后的Bar.js时,我们会发现路径没有被正确解析,如果我们运行它,会给予我们一个 Cannot find module 错误。

"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的用途是什么?

jpfvwuh4

jpfvwuh41#

答案来自其中一个答案中@DenisPshenov的评论,埋了,就在这里提供......
使用NODE_PATH环境变量告诉节点基本url的位置,以便它可以解析绝对路径:

Linux / macOS操作系统

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

Windows动力 shell 程序

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

jvidinwx2#

问题是模块加载器不知道如何找到给定绝对路径foobar/Foo的模块。
TypeScript编译器(tsc)正在正确解析模块路径,否则您将遇到编译错误。但它相信您会正确配置模块加载程序。
例如,从RequireJS的文档中:
支持的配置选项:
baseUrl:用于所有模块查找的根路径。
TypeScript文档简要介绍了为什么需要baseUrl
使用baseUrl是使用AMD模块加载器的应用程序中的常见做法,其中模块在运行时被"部署"到单个文件夹。这些模块的源代码可以位于不同的目录中,但构建脚本会将它们放在一起。

guicsvcw

guicsvcw3#

tsc无法将路径转换为相对路径,尽管您配置了baseUrlpaths,但paths仅在您在编辑器中编写代码时才有用。如果您希望它工作,可以使用ts-node和tsconfig-paths模块:

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

然后运行此脚本

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

然后你就能得到正确的表演。

bwitn5fc

bwitn5fc4#

对于任何还在这个问题上挣扎的人来说。

npm i -D tsc-alias
# pacakage.json#devDependencies#scripts
tsc && tsc-alias
bpsygsoo

bpsygsoo5#

您可以使用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

相关问题