React Native中如何为项目根目录外的文件夹配置路径别名？

针对你的Monorepo结构，要实现@shared/data-types这类路径导入，仅配置Babel和TypeScript还不够——必须修改Metro打包工具的配置（React Native默认使用Metro），因为Metro默认只会扫描当前项目目录，无法识别外部包的路径。以下是完整配置步骤：

1. 配置TypeScript路径别名（frontend-app/tsconfig.json） #

在compilerOptions中添加paths字段，让TypeScript能解析@shared前缀：

{
  "compilerOptions": {
    // 保留原有配置
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["../shared/*"]
    }
  },
  // 可选：让TS类型检查覆盖shared目录
  "include": ["src", "../shared"]
}

2. 配置Babel路径别名（frontend-app/babel.config.js） #

先安装依赖插件：

npm install babel-plugin-module-resolver --save-dev
# 或 yarn add babel-plugin-module-resolver --dev

再修改Babel配置添加别名映射：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@shared': '../shared'
        }
      }
    ]
  ]
};

3. 关键：配置Metro打包工具（frontend-app/metro.config.js） #

Metro默认不会监听项目外的目录，需要修改配置让它扫描packages根目录，同时映射路径：

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

const customConfig = {};

// 让Metro监听monorepo根目录，确保能扫描到shared包
customConfig.watchFolders = [
  path.resolve(__dirname, '../..')
];

// 配置路径映射，让Metro识别@shared前缀
customConfig.resolver = {
  extraNodeModules: {
    '@shared': path.resolve(__dirname, '../shared')
  }
};

// 合并默认配置与自定义配置
module.exports = mergeConfig(getDefaultConfig(__dirname), customConfig);

4. 可选：配置Monorepo Workspaces（根目录package.json） #

如果使用Yarn或npm的Workspace功能，可在根目录package.json中添加配置，让包管理工具识别子包：

{
  "name": "monorepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

完成所有配置后，重启Metro服务（关闭当前npx react-native start进程后重新启动），即可在frontend-app中使用import { 你的类型 } from '@shared/data-types'的方式导入代码。

内容的提问来源于stack exchange，提问作者Bjorn