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

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';