Babel.js 如何在js端模拟react-native项目中的NativeModules?

6yoyoihd  于 2022-12-08  发布在  Babel
关注(0)|答案(1)|浏览(213)

我正在使用expo运行我的react-native应用,我面临的问题是模拟“react-native”导出的NativeModule,我目前的解决方案是使用babel-plugin-module-resolver插件将“react-native”模块重定向到我的“react-native-proxy”模块,该模块导出一个扩展NativeModule的代理对象。
一切都很顺利,直到我想使用expo-file-system来模拟我们的本地文件系统API,expo-file-system是一个es模块,出现了一个看起来像是由模块混合使用引起的错误。我在babe.config.js中尝试了import * as FileSystem from 'expo-file-system';,“react-native-proxy”模块,metro.config.js,都抛出了一个错误。
我怎么能在babel.config.js或babel-plugin中要求一个es模块呢?或者有没有实现上述目标的想法?

  • 谢谢-谢谢
ndasle7k

ndasle7k1#

我自己解决的。因为我知道,从“react-native”导出的NativeModules对象是在Libraries/BatchedBridge/NativeModules.js中创建的,所以我将我的模拟目标改为这个文件。我创建了一个名为“NativeModulesProxy.js”的文件,其中的内容是从“Libraries/BatchedBridge/NativeModules.js”复制的,然后使用babel-plugin-module-resolver插件将src文件重定向到这个文件。

// babel.config.js

const resolvePath = require('babel-plugin-module-resolver').resolvePath;
const path = require('path');
...
plugins: [
      [
        'module-resolver',
        {
          resolvePath(sourcePath, currentFile, opts) {
            if (sourcePath.includes('NativeModules')) {
              const sourceAbsolutePath = path.resolve(path.dirname(currentFile), sourcePath);
              if (sourceAbsolutePath.endsWith('node_modules/react-native/Libraries/BatchedBridge/NativeModules')) {
                return path.resolve(__dirname, 'NativeModulesProxy');
              }
            }
            return resolvePath(sourcePath, currentFile, opts);
          }
        }
      ]
],
...

NativeModules对象是global.nativeModuleProxy引用,基于此,我可以创建自己的代理对象,如“global.myNativeModuleProxy”,它将global.nativeModuleProxy和我的模拟本机模块组合在一起。

相关问题