5

我有一个项目react-native-web，并且在其上配置了博览会。声明脚本的范围为 imports @。我看到 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 用于网络：

./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()

关于如何使这项工作的任何线索？

4

1 回答 1

0

实际上，您已经实现了absolute-path一些错误的配置：

  • Metro bundler 配置与功能无关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文件夹中。

于 2021-12-29T14:03:38.230 回答