将 react-native 模块列入黑名单不起作用

Posted 2023-02-23

【中文标题】将 react-native 模块列入黑名单不起作用

【英文标题】：Blacklisting react-native module doesnt works

【发布时间】：2018-07-17 14:28:38

【问题描述】：

我有一个项目文件夹，其中包含在 React 和 React-native 上开发的 Web 和移动应用程序，有一个 web 依赖项，它在 postinstall 脚本中添加了 SymLink，我面临的问题是 React-native Packager 服务器也选择启动该符号链接并且应用程序无法正常工作。 起初我关注了这个-how to make react native packager ignore certain directories，但 getBlacklistRE 默默地忽略了我通过的任何正则表达式。

编辑 这是我面临的实际问题，我已经尝试实施那里提到的所有解决方案，但还没有成功。 - https://github.com/facebook/react-native/issues/19763

EDIT2 现在在我看来，黑名单不起作用，它也可能由于我在 web 中使用的 babel 版本与下面的 React Native 之间的冲突而发生，即我的 package.json

【参考方案1】：

你提到尝试黑名单没有运气。我没有并排的 web 和 react native 项目，但我确实有一个嵌套在我的 react native 项目中的 web 项目，所以这可能会有所帮助。黑名单确实对我有用，这就是它的实施方式。

在 rn-cli.config.js 中

const blacklist = require('metro/src/blacklist');

module.exports = 
  getTransformModulePath() 
    return require.resolve('./customTransformer'); // More on this below
  ,

  getBlacklistRE() 
    return blacklist([
      /apps\/.*/,
    ]);
  ,
;

我的项目根目录中有一个名为 apps/ 的目录。在应用程序内部/我有相当于 React Native 的 UI Explorer（一个嵌套的 React Native 应用程序）和 Web 文档（React Web 应用程序）。通过将此目录列入黑名单，我项目根目录下的 react native 打包程序将不会加载这些节点模块，否则会出现不必要的冲突。

customTransformer 在这里可能没有直接帮助，但我将其包括在内，以防它帮助您解决问题。我用它来用一个空对象替换本地模拟数据文件，这样我的最终构建就会删除模拟数据。如果您不知道，可能有一种方法可以帮助您完成项目。

// Note transformer was renamed to reactNativeTransformer effective in RN 0.56.x
const upstreamTransformer = require('metro/src/reactNativeTransformer');

module.exports.transform = function (input) 
  const  filename, options, src  = input;
  let newSrc = src;
  if (filename.indexOf('mocks') > -1 && !options.dev) 
    newSrc = 'module.exports = ';
  
  return upstreamTransformer.transform( src: newSrc, filename, options );
;

【讨论】：

谢谢史蒂夫，虽然我看到了这个错误Cannot find module 'metro/src/transformer'。我的 metro 版本是“0.38.1”，react-native 版本是“0.56”，我检查了 metro 模块，我看到很多转换器文件，虽然名称不同，是 JSTransformer 吗？

啊，我在 RN 0.55 上，但在尝试升级到 0.56 时看到同样的错误。

我们在 RN 0.55 上是 Metro 0.30.2

transformer 更名为reactNativeTransformer in metro 0.42.2