如何在 React Native 中为项目根目录之外的文件夹使用路径别名？

Question

我正在开发一个 React Native 项目，该项目是具有多个包的更广泛项目的一部分。项目的文件夹结构如下（排除大部分不相关文件）：

monorepo
└── packages
    ├── backend
    ├── frontend-app
    │   ├── babel.config.js
    │   ├── metro.config.js
    │   ├── tsconfig.json
    │   ├── index.js
    │   └── src
    └── shared
        └── data-types.ts

在

frontend-app

文件夹内，我希望能够从

data-types.ts

文件导入类型。此外，我想通过使用

@shared/data-types

来完成此操作，而不是必须使用相对路径

../../shared/data-types

（甚至更多文件夹）。

我只能发现您必须更新应用程序项目本身内的常规路径别名的

babel.config.js

和

tsconfig.json

，但在运行应用程序时我仍然收到如下警告：

Unable to resolve module ../../../../shared/data-types from ***: 

None of these files exist:
  * ../shared/data-types(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * ../shared/data-types/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

[...]

如何使其适用于 React Native 项目文件夹之外的文件？

Answer 1

路径别名对于更清晰的导入和避免大型项目中的相对路径地狱非常有用。虽然它们通常在项目中使用，但有时需要在 React Native 项目根目录之外使用别名路径，特别是在 monorepos 中或在多个项目之间共享代码时。

要使路径别名适用于 React Native 应用程序项目根目录之外的文件/文件夹，您必须修改

babel.config.js

、

tsconfig.json

和

metro.config.js

文件。

考虑到您的 React Native 项目和

shared

文件夹是同级目录（即它们具有相同的父目录）的目录结构，以下是设置路径别名的方法：

1。安装所需的依赖项： 首先，您需要向 React Native 项目添加开发依赖项，以帮助 Babel 解析别名。

使用 npm：

npm install --save-dev babel-plugin-module-resolver

或使用纱线：

yarn add --dev babel-plugin-module-resolver

2。配置您的文件：

babel.config.js

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    "react-native-reanimated/plugin",
    [
      "module-resolver",
      {
        extensions: [".ios.js", ".android.js", ".ios.jsx", ".android.jsx", ".js", ".jsx", ".json", ".ts", ".tsx"],
        root: ["."],
        alias: {
          "@shared": "../shared",
        },
      },
    ],
  ],
};

tsconfig.json

{
  "compilerOptions": {
    // Other settings
    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
    "paths": {
      "@shared/*": ["../shared/*"]
    },
    // Other settings
  }
}

metro.config.js

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const path = require("path");

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  watchFolders: [path.resolve(__dirname + "/../shared")],
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

完成这些更改后，请确保重新启动 Metro 捆绑程序。如果您遇到任何问题，重置缓存会有所帮助：

npx react-native start --reset-cache

。

通过这些更改，您将能够从 React Native 应用程序中的

@shared

别名无缝导入。