tsc - 不编译别名路径

Question

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

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

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

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

仅使用 TSC 编译器无法解析别名路径。因此，为了使其正常工作，您将需要安装额外的开发包

npm install --save-dev tsc-alias

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

之后，您需要将 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",

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

Answer 2

发展

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

构建

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 3

t打字稿

打字稿转换路径

babel-插件模块-解析器

package.json

部分

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

ttsc

不是一个错误，它是一个基于打字稿配置的插件，用于更复杂的转译

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 4

打字稿

• @zerollup/ts-transform-paths
• tsc 手表

如何：

通过 npm 安装

： npm install -D ttypescript @zerollup/ts-transform-paths tsc-watch

在 

tsconfig.json

添加：

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

在 

package.json

中，脚本如下所示：

{
  ...
  "scripts": {
    "start": "node dist/server.js",
    "build": "ttsc",
    "watch": "tsc-watch --compiler ttypescript/bin/tsc --onSuccess 'npm start'",
    "watch-only": "ttsc -w",
    ...
  },
}

Answer 5

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

Answer 6

ts-node

、

tsconfig-paths

和

typescript-transform-paths

以及打字稿配置

{
  "ts-node": {
    "transpileOnly": true,
    "require": [
      "typescript-transform-paths/register",
      "tsconfig-paths/register"
    ]
  },
  "compilerOptions": {
    ...
    "plugins": [{"transform": "typescript-transform-paths"}]
  },
  ...
}

Answer 7

path

中定义正确的路径，就像在文件

tsconfig.json

 中一样

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

不是这样的

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

并使用命令

tsc && tsc-alias

进行构建（将 TS 转换为 JS）。 它会起作用的。 另请确保安装 typescript 以启用 tsc 和 tsc-alias 以启用上面的 tsc-alias 命令。你可以这样做

npm i --save-dev typescript

npm i --save-dev tsc-alias

。