我想在我的 create-react-app React 前端项目中设置路径配置
mylib
。
这是我的
tsconfig.json
:
{
"compilerOptions": {
...
"baseUrl": "src",
"paths": {
"@bla/*": ["./*"]
}
},
"include": [
"src"
]
}
这是我的项目文件夹的外观:
mylib
-build
-src
--stuff
---things
----x.js
这个项目是我使用 Babel 编译的自定义库,并且我
npm link
在另一个 React 项目 myproject
中测试它。
这是 myFile.tsx
中 myproject
文件的顶部:
import * as myImport from '@bla/stuff/things/x'
这是输出:
编译失败。 ../myproject/build/stuff/things/myFile.js 找不到模块:无法解析“@bla/stuff/things/x” 'C:\Users\xxx\myproject uild oldInWhichMyFileIs'
我在这里缺少什么?
我发现了其他相关的SO问题,但人们说使用
module-alias
库,它仅适用于后端代码。我也不用ts-node
。
您通常会设置路径别名来简化导入。这可以使您的项目的目录结构更清晰且更易于管理。
tsconfig
必须在项目根目录下,然后你可以使用这样的文件夹结构,如果文件夹有子文件夹你需要包含它
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@components/*": ["components/*"],
"@utils/*": ["utils/*"],
"@styles/*": ["styles/*"]
}
}
}