Expo-react本地web提供了错误导入范围的导入

Question

我有一个react-native-web项目，expo就是在上面配置的。声明脚本具有作用域导入@。我看到metro.config.js有expo web抱怨的那些导入的别名，这里是metro.config.js:

/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* @format
*/
const path = require("path")
const extraNodeModules = {
"@modules": path.resolve(__dirname, "modules"),
"@screens": path.resolve(__dirname, "screens"),
"@options": path.resolve(__dirname, "options")
}
const watchFolders = [
path.resolve(__dirname, "modules"),
path.resolve(__dirname, "screens"),
path.resolve(__dirname, "options")
]
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
})
},
resolver: {
extraNodeModules: new Proxy(extraNodeModules, {
get: (target, name) =>
//redirects dependencies referenced from extraNodeModules to local node_modules
name in target
? target[name]
: path.join(process.cwd(), "node_modules", name)
})
},
watchFolders,
resetCache: true
}

我做了一些研究，并将我的babel.config.js修改为：

module.exports = {
presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],
plugins: [
["module:react-native-dotenv", {
"moduleName": "@env",
"path": ".env",
"blacklist": null,
"whitelist": null,
"safe": false,
"allowUndefined": true
},
],
"import-glob",
[
'module-resolver',
{
alias: {
'modules': './modules',
},
}
]
]
};

我知道上面的babel只是针对模块的，它只是一个例子。我在运行expo start时得到了这一点，然后w for web:

./App.js:13
Module not found: Can't resolve '@modules'
11 | 
12 | import { screens } from "@screens";
> 13 | import { hooks, slices, navigators, initialRoute } from "@modules";
14 | import { connectors } from "@store";
15 | 
16 | const Stack = createStackNavigator()
./App.js:18
Module not found: Can't resolve '@options'
16 | const Stack = createStackNavigator()
17 | 
> 18 | import { GlobalOptionsContext, OptionsContext, getOptions } from "@options"
19 | 
20 | const getNavigation = (modules, screens, initialRoute) => {
21 |   const Navigation = () => {
./App.js:12
Module not found: Can't resolve '@screens'
10 | } from "@reduxjs/toolkit"
11 | 
> 12 | import { screens } from "@screens";
13 | import { hooks, slices, navigators, initialRoute } from "@modules";
14 | import { connectors } from "@store";
15 | 
./App.js:14
Module not found: Can't resolve '@store'
12 | import { screens } from "@screens";
13 | import { hooks, slices, navigators, initialRoute } from "@modules";
> 14 | import { connectors } from "@store";
15 | 
16 | const Stack = createStackNavigator()

有什么线索可以告诉我该怎么做？

Answer 1

实际上，您在实现absolute-path配置时出现了一些错误：

• 城域捆绑器配置与absolute-path功能无关，请删除添加到metro.config.js文件的

• 如果使用TypeScript，则必须修改tsconfig.json:

  {
  "compilerOptions": {
  "baseUrl": "./app" /* Base directory to resolve non-absolute module names. */,
  "paths": {
  "@screens": ["./screens"]
  }
  },
  

• 在babel.config.json中，您错误地添加了配置，也许您忘记在配置文件中添加@和root密钥，请遵循以下示例：

  module.exports = {
  plugins: [
  [
  'module-resolver',
  {
  root: ['./app'],
  alias: {
  '@screens': './app/screens',
  },
  extensions: [
  '.ios.ts',
  '.ios.tsx',
  '.android.ts',
  '.android.tsx',
  '.ts',
  '.tsx',
  '.js',
  '.jsx',
  '.json',
  ],
  },
  ],
  ],
  };
  

提示：请考虑，我的应用程序根目录是app。所有TypeScript/JavaScript代码都在app文件夹中。