Expo React Native Web 给出错误导入作用域导入

Question

我有一个项目react-native-web，并且在其上配置了博览会。声明脚本具有范围内的导入@。我看到 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配置存在一些错误：

• Metro 捆绑器配置与该功能无关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添加@和key，请按照以下示例操作：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文件夹中。