TypeScript 路径映射 "Cannot find module a-mapped/a"

Question

我有一个具有以下结构的项目:

┌ tsconfig.json
│ {
│   "compilerOptions": {
│     "baseUrl": ".",
│     "paths": { "a-mapped/*": ["a/*"] }
│   }
│ }
│
├ a
│ └─ a.ts
│    export const a = 1;
└ b
  └─ b.ts
     import { a } from "a-mapped/a";
     export const b = a + 1;

当我运行 tsc , 结果 b.js包含:

var a_1 = require("a-mapped/a");
exports.b = a_1.a + 1;

如果我尝试使用 node 运行它，我收到错误“找不到模块 a-mapped/a”。

我期待 tsc从 ../a/a 生成导入，而不是 a-mapped/a .我错过了什么或做错了什么？

Answer 1

不久前我自己也遇到了这个问题。有趣的是，typescript 会理解路径映射，但在编译后的 javascript by design 中保持原样。 .

The compiler does not rewrite module names. module names are considered resource identifiers, and are mapped to the output as they appear in the source

The module names you write are not going to change in the output. the "paths" and "baseURL" are there to tell the compiler where they are going to be at runtime.https://github.com/Microsoft/TypeScript/issues/9910#issuecomment-234729007

有几种方法可以解决这个问题。
ts节点
您可以使用 ts-node 代替 node 来运行您的项目。
优点 :

易于使用，没有麻烦。

缺点 :

您可能无法做到这一点，例如，如果您正在编写浏览器代码、库或不控制运行时环境。

性能可能是一个问题，尤其是启动时间。

变压器
或者，您可以使用 typescript transformers使编译器输出正确的 javascript 文件(例如 @zerollup/ts-transform-paths 和 ttypescript )。
优点 :

更快的编译时间，您可以使用 ttsc --watch可靠。

Note: I have tested this setup and its much faster than using any tools when using --watch.

缺点 :

至少现在，您需要使用像 ttypescript 这样的 typescript 包装器。

设置起来有点困难。

工具
最后，您可以使用一个工具来修复您生成的 javascript 中的路径( ts-module-alias 、 module-alias 、 ef-tspm )。
优点 :

使用纯正的 typescript 。

易于设置(只需在编译后运行该工具!)

缺点 :

可能会导致编译时间变慢。

watch 操作更难设置。

我最终使用 ef-tspm 来修复文件，它通常可以工作，尽管我对构建时间并不完全满意，并且可能值得探索转换器和 ttypescript。如果有帮助，我创建了一个 typescript / node project with path aliases set-up .