我正在阅读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]/...";
它看起来简单，令人敬畏，更可读。
其他回答
您可以通过使用子路径模式仅使用Node来实现这一点。
例如，将此添加到package.json…
{
"imports": {
"#lib": "./build/path/to/lib",
"#lib/*": "./build/path/to/lib/*",
}
}
.．.会让你像这样导入，避免相对路径。
import { something } from "#lib"
注意，它们必须以散列开头，并且在package中。json，它们必须指向你的构建，这样Node才能识别它。
正如其他人所说，您可以在tsconfig中添加这样的内容。json for Typescript:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#lib": ["./src/path/to/lib"],
"#lib/*": ["./src/path/to/lib/*"],
},
},
}
这是相对路径 而不是下面的代码
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]/...";
它看起来简单，令人敬畏，更可读。
你可以结合使用baseUrl和路径文档。
假设根在最上面的src目录(我正确地阅读了你的图像)使用
// tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
对于webpack，你可能还需要添加模块解析。对于webpack2，这可能是这样的
// webpack.config.js
module.exports = {
resolve: {
...
modules: [
...
'./src/org/global'
]
}
}
Alejandros的答案对我有用，但是当我在webpack 4中使用awesome-typescript-loader时，我还必须在我的webpack中添加tsconfig-paths-webpack-plugin。配置文件以正确解析
用星号检查类似的解决方案
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
},
