如何在发布时使用带有 react-native+expo 的 Babel Module Resolver？

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;

此外，它在发布时按预期工作。

Answer 3

（打字稿项目）

如果遇到困难，请尝试添加文件扩展名列表。

之前：

  const plugins = [
    ['module-resolver', {
      root: ['src'],
    }]
  ];

之后：

  const plugins = [
    ['module-resolver', {
      root: ['src'],
      extensions: ['.tsx', 'json'], // and more
    }]
  ];

---

在我添加extensions 之前，只有别名可以使用，root: ['src'] 不行。