反應和反應原生項目之間的模塊解析？

Question

我們有兩個項目共享一個 API 包裝庫（我們創建的），它利用pusher-js庫進行 websocket 通信。

API 包裝器最初是為基於 NextJS 構建的 Web 版本項目構建的，但現在我們希望將其包含在我們新的 React Native 項目中。 問題在於我們實例化pusher的 API 包裝器內部，我們import pusher from 'pusher-js而為了在 React Native 上工作，我們需要import pusher from 'pusher-js/react-native 。 這個庫顯然不知道誰安裝它的外部用法，只是將這些東西設置為一個方便的包裝器。

這如何在移動項目中實現，或者應該在 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