Question

这是我的.babelrc文件的最新版本：

{
      "presets": ["babel-preset-expo"],
      "env": {
        "development": {
          "plugins": ["transform-react-jsx-source"]
        }
      },
      "plugins": [
        ["module-resolver", {
          "root": ["./src"],
          "alias": {
            "$components": "./src/components",
            "$screens": "./src/screens",
            "$stores": "./src/stores",
            "$utils": "./src/utils",
            "$services": "./src/services",
            "$assets": "./assets",
          }
        }]
      ]
    }

我试图进行很多更改，但是expo不想发布该应用，并且在发布时遇到Main.js文件上的首次导入时显示错误500：

import stores from 'stores';

错误：

500 - "{\"originModulePath\":\"/Users/jhirsch/Code/kliner/app-client/src/Main.js\",\"targetModuleName\":\"stores\",\"message\":\"Unable to resolve module `stores` from `/Users/jhirsch/Code/kliner/app-client/src/Main.js`: Module `stores` does not exist in the Haste module map\\n\\nThis might be related to https://github.com/facebook/react-native/issues/4968\\nTo resolve try the following:\\n  1. Clear watchman watches: `watchman watch-del-all`.\\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\",\"errors\":[{\"description\":\"Unable to resolve module `stores` from `/Users/jhirsch/Code/kliner/app-client/src/Main.js`: Module `stores` does not exist in the Haste module map\\n\\nThis might be related to https://github.com/facebook/react-native/issues/4968\\nTo resolve try the following:\\n  1. Clear watchman watches: `watchman watch-del-all`.\\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\"}],\"name\":\"Error\",\"stack\":\"Error: Unable to resolve module `stores` from `/Users/jhirsch/Code/kliner/app-client/src/Main.js`: Module `stores` does not exist in the Haste module map\\n\\nThis might be related to https://github.com/facebook/react-native/issues/4968\\nTo resolve try the following:\\n  1. Clear watchman watches: `watchman watch-del-all`.\\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\\n    at ModuleResolver.resolveDependency (/Users/jhirsch/Code/kliner/app-client/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)\\n    at ResolutionRequest.resolveDependency (/Users/jhirsch/Code/kliner/app-client/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)\\n    at DependencyGraph.resolveDependency (/Users/jhirsch/Code/kliner/app-client/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)\\n    at Object.resolve (/Users/jhirsch/Code/kliner/app-client/node_modules/metro/src/lib/transformHelpers.js:180:25)\\n    at dependencies.map.result (/Users/jhirsch/Code/kliner/app-client/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)\\n    at Array.map (<anonymous>)\\n    at resolveDependencies (/Users/jhirsch/Code/kliner/app-client/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)\\n    at /Users/jhirsch/Code/kliner/app-client/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33\\n    at Generator.next (<anonymous>)\\n    at step (/Users/jhirsch/Code/kliner/app-client/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)\"}"
    ERROR
    15:45
    Unable to resolve "stores" from "src/Main.js"

您有一个想法或替代方法来解决expo的别名吗？很奇怪，因为当我在本地模拟器上运行应用程序时，它是功能性的。

Answer 1

.babelrc最后以这种格式工作：

{
  "presets": ["babel-preset-expo"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@components": "./src/components",
          "@screens": "./src/screens",
          "@stores": "./src/stores",
          "@utils": "./src/utils",
          "@services": "./src/services",
          "@assets": "./assets",
          "@constants": "./src/constants"
        }
      },
    ],
  ],
}

并在我导入时添加“ @”：

import stores from '@stores';

Answer 2

如果您像我一样，即使在路径前面使用@字符，仍然会遇到问题，

请考虑使用babel-plugin-root-import-babel-plugin-module-resolver的替代方法，

功能不如babel-plugin-module-resolver

但它能够解决基本问题-像这样的路径中的点太多

import Button from '../../../../components/Button;

那是我的主要担忧。

这是我的配置（babel.config.js）：

module.exports = function(api) {
  api.cache(true);

  const rootImportOpts = {
    paths: [
      {
        root: __dirname,
        rootPathPrefix: '~/',
        rootPathSuffix: 'src',
      },
      {
        root: __dirname,
        rootPathPrefix: '#/',
        rootPathSuffix: 'spec',
      }
    ]
  };

  return {
    presets: ['babel-preset-expo'],
    plugins: [['babel-plugin-root-import', rootImportOpts]]
  };
};

文件夹结构：

expo-app/
  ...
  spec/
  src/
    ...
    components/
    ...
  ...
  app.config.js
  babel.config.js

因此，代替此：

import Button from '../../../../components/Button;

我用那个

import Button from '~/components/Button;

而且，它在发布时按预期工作。

如何在发布时将Babel Module Resolver与react-native + expo一起使用？

2 个答案: