如何在打字稿编译器中使用绝对路径和baseUrl

Question

与

tsc

捆绑包时，我得到错误的输出。 这是我的项目目录结构：

common
└── index.ts
types
├── action.ts
├── index.ts
└── request.ts
utils
├── event.ts
├── index.ts
├── request.ts
└── response.ts
package.json 
tsconfig.json

我的

tsconfig

的内容：

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2021",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": ".",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "strictBindCallApply": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true
  }
}

如您所见，我已启用

baseUrl: '.'

。

common/index.ts

的内容：

import { ErrorPayload } from 'types'
import { responseActionMaker } from 'utils'

export class ResRaiseError implements ErrorPayload {
  code: string
  message?: Record<string, any>
  stack?: string
}

export const resRaiseError = responseActionMaker<ResRaiseError>()

如您所见，我使用的是绝对路径，并且在编译包时，

tsc

不会引发错误，因为它可以使用

baseUrl: '.'

找到包。问题是它在“dist/common/index.js”中产生错误的输出：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.resRaiseError = exports.ResRaiseError = void 0;
const utils_1 = require("utils");
class ResRaiseError {
}
exports.ResRaiseError = ResRaiseError;
exports.resRaiseError = (0, utils_1.responseActionMaker)();
//# sourceMappingURL=index.js.map

它找不到“utils”，因此使用此包的项目也无法进行任何输入，因为

dist/common/index.d.ts

也有错误的导入路径。

目前我被迫始终使用相关路径：

import { ErrorPayload } from '../types'
import { responseActionMaker } from '../utils'

export class ResRaiseError implements ErrorPayload {
  code: string
  message?: Record<string, any>
  stack?: string
}

export const resRaiseError = responseActionMaker<ResRaiseError>()

问题：如何让

tsc

在构建/编译包时自动将绝对路径转换为合适的相对路径？ 我希望

tsc

将

import {anything} from 'utils'

转换为

import {anything} from '../utils'

Answer 1

1. 安装 tsc-alias 作为开发依赖项：

"scripts": {
  "build": "tsc && tsc-alias"
}

2. 在 tsconfig.json 中，添加 paths 选项：

"paths": {
    "common/*": ["common/*"],
    "types/*": ["types/*"],
    "utils/*": ["utils/*"]
  }

3. 更新您的 package.json 构建脚本：

"scripts": {
  "build": "tsc && tsc-alias"
}

运行

npm run build

时，它将首先使用 tsc 编译 TypeScript 文件，然后 tsc-alias 将对编译后的文件进行后处理，将绝对路径转换为相对路径。