如何在发布时将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：

{
      "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",
          }
        }]
      ]
    }

和错误：

import stores from 'stores';

您是否有想法或替代方法来解决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

结果，而不是这个：

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

我用的是：

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

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