我正在阅读tsconfig中的路径映射。json,我想用它来避免使用以下丑陋的路径:
项目组织有点奇怪,因为我们有一个包含项目和库的单一存储库。项目按公司和浏览器/服务器/通用进行分组。
如何配置tsconfig中的路径?Json,而不是:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我可以使用:
import { Something } from "lib/src/[browser/server/universal]/...";
webpack配置中还需要其他东西吗?或者是tsconfig。json足够了吗?
这是相对路径
而不是下面的代码
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我们可以避免“../../../../.. .”/“它看起来很奇怪,也不容易读。
Typescript配置文件有相同的答案。
只要指定baseUrl,配置就会照顾你的相对路径。
配置方法:tsconfig。Json文件添加以下属性。
"baseUrl": "src",
"paths": {
"@app/*": [ "app/*" ],
"@env/*": [ "environments/*" ]
}
最终会像下面这样
import { Something } from "@app/src/[browser/server/universal]/...";
它看起来简单,令人敬畏,更可读。
如果你使用的是路径,在使用tsc将typescript编译成纯javascript后,你需要将绝对路径改回相对路径才能工作。
目前最流行的解决方案是tsconfig-paths。
我试过了,但对于我复杂的设置,它不适合我。
此外,它在运行时解析路径,这意味着包大小和解析性能方面的开销。
所以,我自己写了一个解,tscpaths。
我认为它总体上更好,因为它在编译时替换路径。这意味着没有运行时依赖关系或任何性能开销。使用起来非常简单。您只需要在package.json中的构建脚本中添加一行。
这个项目非常年轻,所以如果你的设置非常复杂,可能会有一些问题。
它完美地适用于我的设置,尽管我的设置相当复杂。