我正在阅读tsconfig中的路径映射。json，我想用它来避免使用以下丑陋的路径:
项目组织有点奇怪，因为我们有一个包含项目和库的单一存储库。项目按公司和浏览器/服务器/通用进行分组。
如何配置tsconfig中的路径?Json，而不是:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我可以使用:
import { Something } from "lib/src/[browser/server/universal]/...";
webpack配置中还需要其他东西吗?或者是tsconfig。json足够了吗?
当前回答
如果typescript + webpack 2 + at-loader正在使用，有一个额外的步骤(@mleko的解决方案只部分适用于我):
// tsconfig.json
{
"compilerOptions": {
...
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
resolve: {
plugins: [
new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
]
}
TypeScript 2.0中的高级路径解析
其他回答
用星号检查类似的解决方案
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
},
使用这个检出编译器操作
我在文件中添加了baseUrl项目如下:
“baseUrl " src "
它工作得很好。因此，为项目添加基本目录。
对于组件库
如果你正在处理一个返回UI组件的库(如react-bootstrap或antd)，那么这应该适合你。
"compilerOptions": {
....
"rootDir": "src",
"baseUrl": ".",
"paths": {
"src/*": ["src/*"],
"components/*": ["src/components/*"],
}
},
如果你正在使用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....
Alejandros的答案对我有用，但是当我在webpack 4中使用awesome-typescript-loader时，我还必须在我的webpack中添加tsconfig-paths-webpack-plugin。配置文件以正确解析
