tsc -不编译别名路径

Question

我有打字稿，并使用别名。这是tsconfig.json的一部分

"compilerOptions": {
  "baseUrl": "./src",
   ...
},

通过设置基本url，我可以更改

import User from "src/models/User.model.ts"

至

import User from "models/User.model.ts"

问题是tsc将src文件夹编译为dist文件夹，因此用户导入路径应更改为相对路径，如下所示：

"../models/User.model.js"

但是它没有改变，所以我得到了以下错误：

"models/User.model.js" not found

我寻找了答案，但没有找到答案。

Answer 1

在typescript中关于这个问题有很长的讨论，我似乎找不到比这个更好的解决方案。

开发

npm i -save-dev tsconfig-paths/register

tsconfig.json

{
 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
    },   
  }
}

package.json

"scripts": {
  dev: "ts-node -r tsconfig-paths/register src/index.ts"
}

Build

npm i -save-d ttypescript @zerollup/ts-transform-paths

tsconfig.json

{
 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
    },   
  }
 "plugins": [
      {
          "transform": "@zerollup/ts-transform-paths",
      }
  ],
}

package.json

"scripts": {
  build: "ttsc -P ./tsconfig.json"
}

Answer 2

ttypescript

typescript-transform-paths

babel-plugin-module-resolver

package.json部件

"build": "ttsc && babel dist -d dist",

ttsc不是一个错误，它是一个插件，而不是typescript配置，用于更复杂的转换

tsconfig.json部件

"outDir": "dist",
"baseUrl": "./",
"paths": {
    "@/*": [
        "./src/*"
    ],
    "$/*": [
        "./tests/unit/*"
    ]
},
"plugins": [
    {
        "transform": "typescript-transform-paths",
        "afterDeclarations": true
    }
],

.babelrc全部内容

{
  "compact": false,
  "retainLines": true,
  "minified": false,
  "inputSourceMap": false,
  "sourceMaps": false,
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./dist"],
        "alias": {
          "@": "./dist"
        }
      }
    ]
  ]
}

Answer 3

TSC编译器单独的不能解析别名路径。因此，为了使它工作，您将需要安装额外的开发包

npm install --save-dev tsc-alias

tsc-alias用于在tsc编译器的typescript编译后将别名路径替换为相对路径，因为编译器本身无法解析别名路径

之后，您需要将package.json文件中的构建命令修改为

"build": "tsc && tsc-alias",

运行npm run build之后应该可以工作，代码应该被正确地编译成javascript

如果您想同时启用热重新加载，您将需要再安装一个开发包

npm install --save-dev concurrently

concurrently用于并发运行多个命令

之后，您需要在package.json文件中添加1个新的脚本

"build:watch": "concurrently --kill-others \"tsc -w\" \"tsc-alias -w\"",

运行npm run build:watch之后应该可以工作，代码应该被正确编译为具有热重新加载功能的javascript

请注意：我使用的是此版本的软件包

"tsc-alias": "^1.5.0",
"typescript": "^4.5.5",
"concurrently": "^7.0.0",

较旧或较新的版本可能会引入一些编译代码的问题