如何让React忽略React Native专属依赖包避免编译报错？

以下是几种可行的方案，无需替换依赖包即可实现React编译时忽略React Native专属依赖：

1. 条件导入（推荐） #

在通用依赖包A的代码中，根据运行环境动态判断是否导入RN专属依赖，避免在Web环境下加载该模块：

同步判断方式 #

// 依赖包A的核心代码
let rnExclusiveDep;

// 识别React Native环境：RN中window.navigator.product为'ReactNative'
if (typeof window !== 'undefined' && window.navigator.product === 'ReactNative') {
  rnExclusiveDep = require('react-native-exclusive-package');
}

// 使用时先判断依赖是否存在
if (rnExclusiveDep) {
  // 执行RN专属逻辑
  rnExclusiveDep.someMethod();
}

异步动态导入（适合ES模块） #

如果使用ES模块，可以结合环境变量实现异步导入：

// 依赖包A的代码
let rnExclusiveDep;

// 通过环境变量区分平台（需提前配置）
if (process.env.REACT_APP_PLATFORM === 'react-native') {
  rnExclusiveDep = await import('react-native-exclusive-package');
}

• React项目：在.env文件中设置REACT_APP_PLATFORM=web
• React Native项目：设置REACT_APP_PLATFORM=react-native

2. Webpack别名替换 #

如果React项目使用Webpack构建，可以通过resolve.alias将RN专属依赖指向一个空模块，编译时就不会打包该依赖：

步骤1：创建空模块 #

在项目根目录新建empty-module.js：

// 导出空对象或必要的Mock方法，避免代码报错
export default {};

步骤2：修改Webpack配置 #

// webpack.config.js
const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      'react-native-exclusive-package': path.resolve(__dirname, './empty-module.js'),
    },
  },
};

如果是Create React App项目，需使用react-app-rewired或craco来修改Webpack配置（默认无法直接编辑配置文件）。

3. Babel条件编译 #

通过Babel插件实现编译时的条件替换，在Web环境下移除RN专属依赖的导入语句：

使用babel-plugin-module-resolver #

在.babelrc或babel.config.js中配置：

{
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "react-native-exclusive-package": process.env.REACT_APP_PLATFORM === "web" ? "./empty-module.js" : "react-native-exclusive-package"
        }
      }
    ]
  ]
}

同样需要设置环境变量区分平台。

4. 拆分依赖包结构 #

将通用依赖包A拆分为核心功能包和RN专属扩展包：

• package-a-core：包含React和RN共用的核心逻辑
• package-a-rn：包含RN专属依赖及扩展逻辑

React项目仅安装package-a-core，RN项目同时安装package-a-core和package-a-rn，在RN代码中结合使用两个包的功能。

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