我正在阅读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]/...";
它看起来简单，令人敬畏，更可读。
其他回答
看起来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/*" ]
}
},
}
确保你有 ｀ { “compileOnSave”:没错, " compilerOptions ": { "路径":{ “@styles /”:(“资产/ scss /”) ｝ }， ｝
｀ 这给我带来了麻烦。
使用这个检出编译器操作
我在文件中添加了baseUrl项目如下:
“baseUrl " src "
它工作得很好。因此，为项目添加基本目录。
如果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中的高级路径解析
正确是很重要的。
import Home from '@app/features/Home';
src /功能/ Home.tsx
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@app/*": [
"src/*"
],
},
