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 运行它，我得到错误 "Cannot find module 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 to make the compiler output correct javascript files (for example @zerollup/ts-transform-paths and 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) 中的路径。

优点：

使用纯正的打字稿。
易于设置（只是运行编译后的工具！）

缺点：

可能会导致编译时间变慢。
手表操作更难设置。

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

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

TypeScript path mapping "Cannot find module a-mapped/a"

typescript

typescript3.0

ts-节点

变形金刚

工具