嘿伙计们,所以我正在努力在 React Native 中设置绝对路径,我使用了 babel-plugin-module-resolver 来实现这一点,并且还设置了
tsconfig.json
和 'babel.config.js' 速度如下,VS 代码没有不会给出任何有关路径的错误,但地铁服务器会抛出这样的错误
BUNDLE ./index.js
error: Error: Unable to resolve module @pages/pokemons/pokemons from D:\Work And Stydy Of IT\ReactNative\RTKTS\src\App.tsx: @pages/pokemons/pokemons could not be found within the project or in these directories:
node_modules
> 1 | import Pokemons from '@pages/pokemons/pokemons';
| ^
2 | import React from 'react';
3 |
4 | function App(): JSX.Element {
at ModuleResolver.resolveDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
at DependencyGraph.resolveDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\node-haste\DependencyGraph.js:277:43)
at Object.resolve (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\lib\transformHelpers.js:169:21)
at Graph._resolveDependencies (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:473:35)
at Graph._processModule (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:261:38)
at async Graph._addDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:372:20)
at async Promise.all (index 2)
at async Graph._processModule (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:322:5)
at async Graph._traverseDependenciesForSingleFile (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:249:5)
at async Promise.all (index 0)
// tsconfig.json
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@app": [
"app/index"
],
"@app/*": [
"app/*"
],
"@services": [
"services/index"
],
"@services/*": [
"services/*"
],
"@pages": [
"pages/index"
],
"@pages/*": [
"pages/*"
],
}
},
"include": [
"src/**/*",
]
}
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias: {
'@app': ['app/index'],
'@app/*': ['app/*'],
'@services': ['services/index'],
'@services/*': ['services/*'],
'@pages': ['pages/index'],
'@pages/*': ['pages/*'],
underscore: 'lodash',
},
},
],
],
};
到目前为止我尝试过的步骤:
node_modules
和 yarn.lock
文件并重新安装软件包。在发布此内容之前,我尝试了很多可以在 Google 上找到的答案,之后,我发布了
我认为 TypeScript 配置文件和
babel.config.js
文件不需要 index
路由名称,在我的情况下,这两种配置都类似于以下示例:
// tsconfig.json
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@api": ["./api"], // this is for importing index file
"@api/*": ["./api/*"], // this is for importing other files underneath of the api folder
// babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'react-native-reanimated/plugin',
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.ts',
'.ios.tsx',
'.android.ts',
'.android.tsx',
'.ts',
'.tsx',
'.js',
'.jsx',
'.json',
],
alias: {
'@api': './src/api',
},
},
],
],
};
这些配置对我有用。