我正在阅读tsconfig中的路径映射。json,我想用它来避免使用以下丑陋的路径:
项目组织有点奇怪,因为我们有一个包含项目和库的单一存储库。项目按公司和浏览器/服务器/通用进行分组。
如何配置tsconfig中的路径?Json,而不是:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我可以使用:
import { Something } from "lib/src/[browser/server/universal]/...";
webpack配置中还需要其他东西吗?或者是tsconfig。json足够了吗?
你可以结合使用baseUrl和路径文档。
假设根在最上面的src目录(我正确地阅读了你的图像)使用
// tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
对于webpack,你可能还需要添加模块解析。对于webpack2,这可能是这样的
// webpack.config.js
module.exports = {
resolve: {
...
modules: [
...
'./src/org/global'
]
}
}
看起来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/*" ]
}
},
}
2021年解决方案。
注意:CRA。最初,使用第三方库或为alias弹出应用程序的想法对我来说似乎很疯狂。然而,经过8个小时的搜索(并尝试了带有eject的变体),结果发现这个选项是最不痛苦的。
步骤1。
yarn add --dev react-app-rewired react-app-rewire-alias
步骤2。
在你的项目根目录下创建config-override .js文件,并填充如下内容:
const {alias} = require('react-app-rewire-alias')
module.exports = function override(config) {
return alias({
assets: './src/assets',
'@components': './src/components',
})(config)
}
步骤3。修复你的包裹。json文件:
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
如果@declarations不起作用,将它们添加到d.ts文件中。
例如:
“@constants”:”。/src/constants', =>在react-app-env.d中添加Ts声明模块@constants;
仅此而已。现在你可以像往常一样继续使用yarn或npm start/build/test命令。
完整版本的文档。
注意:文档中的“使用ts / js配置”部分对我不起作用。在构建项目时仍然存在“不支持别名导入”的错误。所以我用了一个更简单的方法。幸运的是,它起作用了。