反应和反应本机项目之间的模块解析？

Question

我们有两个共享 API 包装器库（我们创建的）的项目，该库使用 pusher-js 库进行 websocket 通信。

API wrapper 最初是为基于 NextJS 构建的 web 版本项目构建的，但现在我们希望将其包含在我们新的 React Native 项目中。问题出在我们实例化 pusher 的 API 包装器内部，我们 import pusher from 'pusher-js 而要在 React Native 上工作，我们需要 import pusher from 'pusher-js/react-native。这个 lib 显然不知道谁安装它的外部用法，只是将这些东西设置为一个方便的包装器。

这如何在移动项目中实现，或者应该在 API 库中设置？我已经通过 babel 插件研究了模块解析，但不确定如何为这个实例设置它。

Answer 1

您可以拥有针对移动平台的特定平台文件。

// pusher.ts
import pusher from 'pusher-js';
export default pusher;

// pusher.native.ts
import pusher from 'pusher-js/react-native';
export default pusher;

// whenever you need pusher
import pusher from './pusher';

React native 将为您从 pusher.native 导入。 https://reactnative.dev/docs/platform-specific-code#native-specific-extensions-ie-sharing-code-with-nodejs-and-web

反应和反应本机项目之间的模块解析？

Module resolving between react and react native projects?

reactjs

react-native

babeljs

babel-plugin-module-resolver