我正在阅读tsconfig中的路径映射。json,我想用它来避免使用以下丑陋的路径:
项目组织有点奇怪,因为我们有一个包含项目和库的单一存储库。项目按公司和浏览器/服务器/通用进行分组。
如何配置tsconfig中的路径?Json,而不是:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我可以使用:
import { Something } from "lib/src/[browser/server/universal]/...";
webpack配置中还需要其他东西吗?或者是tsconfig。json足够了吗?
如果你正在使用tsconfig-paths,这对你不起作用,试试tsconfig.json:
{
// ...
"compilerOptions": {
"outDir": "dist",
"rootDir": "src",
"baseUrl": ".",
"paths": {
"@some-folder/*": ["./src/app/some-folder/*", "./dist/app/some-folder/*"],
// ...
}
},
// ...
}
如果编译器看到@some-folder/some-class,它会试图在./src…或在。/dist....
看起来React已经更新了,不允许你在tsconfig中设置“路径”。json anylonger。
nice React只输出一个警告:
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
然后更新您的tsconfig。Json,并为您删除整个“路径”部分。有个办法可以绕过这条路
npm run eject
这将通过添加配置和脚本目录以及build/config文件到您的项目中,弹出所有的create-react-scripts设置。这也允许通过更新{project}/config/*文件来对所有内容的构建、命名等进行更多的控制。
然后更新tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
{…}
"paths": {
"assets/*": [ "assets/*" ],
"styles/*": [ "styles/*" ]
}
},
}
这可以在您的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