我正在阅读tsconfig中的路径映射。json，我想用它来避免使用以下丑陋的路径:
项目组织有点奇怪，因为我们有一个包含项目和库的单一存储库。项目按公司和浏览器/服务器/通用进行分组。
如何配置tsconfig中的路径?Json，而不是:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我可以使用:
import { Something } from "lib/src/[browser/server/universal]/...";
webpack配置中还需要其他东西吗?或者是tsconfig。json足够了吗?
当前回答
/只从根目录开始，为了获得相对路径，我们应该使用./或../
其他回答
您可以通过使用子路径模式仅使用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/*"],
},
},
}
Alejandros的答案对我有用，但是当我在webpack 4中使用awesome-typescript-loader时，我还必须在我的webpack中添加tsconfig-paths-webpack-plugin。配置文件以正确解析
用星号检查类似的解决方案
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
},
这对我来说很管用:
yarn add --dev tsconfig-paths
ts-node -r tsconfig-paths/register <your-index-file>.ts
这将加载tsconfig.json中的所有路径。tsconfig.json示例:
{
"compilerOptions": {
{…}
"baseUrl": "./src",
"paths": {
"assets/*": [ "assets/*" ],
"styles/*": [ "styles/*" ]
}
},
}
确保你有baseUrl和路径来工作
然后你可以像这样导入:
import {AlarmIcon} from 'assets/icons'
这可以在您的tsconfig上设置。json文件，因为它是一个TS特性。
你可以这样做:
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environment/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
},
...
请记住，你想要引用的路径，它以你的baseUrl作为你所指向的路由的基础，这是强制性的，如文档所述。
字符“@”不是强制性的。
设置好之后，你可以像这样轻松地使用它:
import { Yo } from '@config/index';
你可能会注意到的唯一一件事是，智能感知在当前的最新版本中不起作用，所以我建议在导入/导出文件时遵循索引约定。
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
