将流浏览器与 expo 一起使用答案

【问题标题】：Use stream-browserify with expo将流浏览器与 expo 一起使用
【发布时间】：2019-06-28 10:06:33
【问题描述】：

stream 不能与 expo 一起使用，因为它是 Node.js 标准包。但是，stream-browserify 包可以在这些情况下用作替代方案。

为了让模块而不是原生 Node 包解决这个问题，我试图让 babel-plugin-require-rewrite 与 expo 一起工作。

我将此添加到babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ["rewrite-require", { aliases: {
        "stream": "stream-browserify"
      }}]
    ]
  };
};

不幸的是，捆绑器不尊重它。尝试时出现此错误：

The package at "node_modules\qr-image\lib\qr.js" attempted to import the Node standard library module "stream". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo

是否有可能在世博会上进行这项工作？

【问题讨论】：

您是否尝试过使用rn-nodeify？ (github.com/tradle/rn-nodeify) 似乎人们将它与你想使用的库一起使用github.com/tradle/rn-nodeify/issues/32
真的没用。我不知道为什么，确切地说。我创建了一个包含详细信息的问题：github.com/tradle/rn-nodeify/issues/77
如果您明确尝试使用stream，新版本的 Expo 已经带有移植的stream 版本。继续var stream = require('stream');。我使用的是 Expo 2.6.14 版。
您使用的是哪个 Expo 版本？你试过require('stream')吗？您甚至不需要将它添加到 package.json。并非所有软件包都被移植。例如，crypto 不起作用。

标签： react-native babeljs expo

【解决方案1】：

您无需修改 babel 配置即可在源代码中使用 stream-browserify。您可以在您的App.js 中导入stream-browserify。我在GitHub 上创建了一个简单的示例。

App.js

const Stream = require('stream-browserify');

Package.json

  "dependencies": {
    "buffer": "^5.2.1",
    "events": "^3.0.0",
    "stream-browserify": "^2.0.2",
    "readable-stream": {
      "version": "2.3.6",
      "dependencies": {
        "core-util-is": "github:mjmasn/core-util-is"
      }
    }
    ...
  }

stream-browserify 有依赖 readable-stream，它有自己的依赖和使用节点环境。要解决它，您必须添加这些节点包。你可以阅读core-util-is fork here。

【讨论】：

问题是，我的依赖树中需要stream 的任何模块仍然会尝试查找本机stream，而不是stream-browserify。我想更改所有需要本机模块的尝试。
是的。在这种情况下它不会工作。 rewrite-require 也不适用于节点模块。像解决方法一样，您可以创建qr-image fork 并更改几个require。

【解决方案2】：

我发布的这个答案rn-nodeify install 应该可以工作。除了第 1 步 和 第 5 步，请遵循所有步骤。 步骤 3 用于添加您特别希望安装的节点包，在这种情况下指定 stream。请根据您在Step 3中的要求在Step 4中进行修改。

如果您想让我详细说明，请发表评论。

【讨论】：

【解决方案3】：

最终为我工作的是创建一个具有以下内容的metro.config.js 文件（我使用readable-stream 而不是stream-browserify，但我认为两者都应该工作）：

module.exports = {
    resolver: {
        extraNodeModules: {
            stream: require.resolve('readable-stream'),
        },
    },
};

然后我只使用了yarn add readable-stream，这允许依赖项使用readable-stream，就好像它是stream。

这是基于我在这里找到的信息：https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd#file-node-modules-in-react-native-md

【讨论】：