将 react-native 模块列入黑名单不起作用 [英] Blacklisting react-native module doesnt works

问题描述

我有一个项目文件夹，其中包含在 React 和 React-native 上开发的 Web 和移动应用程序，Web 依赖项在 postinstall 脚本中添加了 SymLink，我面临的问题是 React-native Packager 服务器也选择那个符号链接和应用程序不能正常工作.起初我跟着这个 -

解决方案

你提到尝试黑名单但没有成功.我没有并排的 Web 和 React Native 项目，但我的 React Native 项目中确实嵌套了一个 Web 项目，因此这可能会有所帮助.黑名单对我有用，这就是它的实现方式.

在 rn-cli.config.js

const blacklist = require('metro/src/blacklist');模块.出口 = {getTransformModulePath() {return require.resolve('./customTransformer');//更多关于这个下面},getBlacklistRE() {返回黑名单([/应用\/.*/，]);},};

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

customTransformer 在这里可能没有直接帮助，但我将其包含在内，以防它对您的情况有所帮助.我用它用一个空对象替换本地模拟数据文件，以便我的最终构建已经剥离了模拟数据.如果您不知道，可能有一种方法可以帮助您的项目.

//注意 Transformer 被重命名为 reactNativeTransformer 在 RN 0.56.x 中有效const upstreamTransformer = require('metro/src/reactNativeTransformer');module.exports.transform = 函数(输入){const { 文件名，选项，src } = 输入；让 newSrc = src;if (filename.indexOf('mocks') > -1 && !options.dev) {newSrc = 'module.exports = {}';}返回 upstreamTransformer.transform({ src: newSrc, 文件名, 选项 });};

I have a project folder which contains both Web and Mobile application developed on React and React-native, There is a dependency for web which adds SymLink in the postinstall script, The problem I am facing is React-native Packager server also picks up that symlink and App doesnt work correctly. At first I followed this- how to make react native packager ignore certain directories but getBlacklistRE silently ignores whatever Regex I am passing.

EDIT This is the actual issue I am facing and I have tried implemented all the solutions mentioned there but no success yet. - https://github.com/facebook/react-native/issues/19763

EDIT2 Now seems to me blacklisting not working and it could also happen due to clashes between the babel version I am using in web and that of React Native below is my package.json

解决方案

You mention trying blacklist with no luck. I don't have a web and react native project side by side but I do have a web project nested inside my react native project so this may be of some help. The blacklist does work for me and this is how it is implemented.

In 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\/.*/,
    ]);
  },
};

I have a directory called apps/ in the root of my project. Inside apps/ I have the equivalent of React Native's UI Explorer (a nested React Native app) and web documentation (React web app). By blacklisting this directory the react native packager at the root of my project won't load those node modules, otherwise there is unwanted collision.

The customTransformer may not be of direct help here but I include it incase it lends a hand to your situation. I use it to replace local mock data files with an empty object so that my final builds have mocked data stripped. There may be a way this helps your project out if you're not aware of it.

// 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 });
};

这篇关于将 react-native 模块列入黑名单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！