如何使用带有 TypeScript 声明的 Webpack 别名

Question

我正在用 TypeScript 编写一个 NPM 包，但我找不到在 TypeScript 声明中转换 Webpack 别名的方法。

webpack.config.js

{
  // ...more Webpack configurations
  resolve: {
  extensions: [".ts", ".js"],
  alias: {
    "@": resolvePath("src")
  }
}

tsconfig.json

{
  "compilerOptions": {
    // More options
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

我将babel-loader与@babel/preset-typescript但它不输出声明文件。

tsc --emitDeclarationOnly发出声明文件，但它不会用正确的路径替换@/ 。 与ts-loader相同。

我可以使用moduleNameMapper让它在 Jest 中工作。 如果我可以让它工作构建声明文件，我不再需要编写类似../../../../model东西。

我在网上找到的大多数答案都是关于编译 JavaScript 文件的，对此我没有任何问题。 任何帮助将不胜感激。

Answer 1

我终于找到了解决方案。 您需要ttypescript和ttypescript typescript-transform-paths 。 您添加以下compilerOptions在tsconfig.json

"plugins": [
  { "transform": "typescript-transform-paths", "afterDeclarations": true }
]

并运行

ttsc --emitDeclarationOnly

我为此写了一篇文章 。

Answer 2

2021 年更新的答案

不，我们不能在声明文件中解析路径别名。 ttsc曾经是一个选项，但它没有维护 2 年，并且最新版本的ttsc看起来与 TypeScript 4 及更高版本不兼容。 看到这个问题。

编写相对路径仍然是进行 TypeScript 包开发的唯一方法，因为 TypeScript 团队仍然拒绝在tsc正式支持它。

Answer 3

我有一个类似的问题，我设法像这样解决它。

安装ts-patch并且“typescript-transform-paths”开始工作。

在这里回购： https : //github.com/worldpwn/tsc-declaration-alias-issue

包.json

{
  "name": "a",
  "version": "0.0.1",
  "main": "dist/index.js",
  "scripts": {
    "prepare": "ts-patch install -s",
    "build": "tsc",
    "build-webpack": "webpack --mode=production"
  },
  "devDependencies": {
    "ts-loader": "^9.2.6",
    "ts-patch": "^2.0.1",
    "tsconfig-paths-webpack-plugin": "^3.5.2",
    "typescript": "^4.5.2",
    "typescript-transform-paths": "^3.3.1",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "declaration": true,
    "rootDir": "src",
    "outDir": "dist",
    "paths": {
      "@alias/*": [
        "alias-folder/*"
      ],
    },
    "plugins": [
      {
        "transform": "typescript-transform-paths",
        "afterDeclarations": true
      }
    ]
  },
  "files": [
    "src/index.ts"
  ],
}

webpack.config.js

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    plugins: [new TsconfigPathsPlugin()]
  },
  plugins: [
  ],
  output: {
    library: {
      name: 'a',
      type: 'umd'
    },
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

如果您将使用 typescript 编译器生成带有路径/别名的声明，您将获得一个 d.ts 文件，如下所示：

import { AliasClass } from "@alias";
export declare class A {
    private readonly aliasClass;
    do(): AliasClass;
}

似乎 TypeScript 编译器不使用这种转换：

"plugins": [
      {
        "transform": "typescript-transform-paths",
        "afterDeclarations": true
      }
    ]

应用安装ts-patch所需的那些转换，它可以工作！

import { AliasClass } from "./alias-folder/index";
export declare class A {
    private readonly aliasClass;
    do(): AliasClass;
}