Node-vibrant: 请求可用于 react-native 的版本

嗯。 我想我对期望 node 模块在 react-native 中工作很天真。 我发现这个特殊问题的出现是因为 react-native 打包器尊重package.json的browser字段，因此加载浏览器版本而不是节点版本。 要求node-vibrant/lib/index可以解决这个问题，但下一个错误是Requiring unknown module 'fs'

@chetstone你试过rn-nodeify吗？ 默认情况下，核心节点模块在 RN 应用程序中不起作用，因为它实际上不在节点 (V8) 上运行，而是在 JSC 上运行。 它不是防弹的，但根据我的经验运行得相当好。

也就是说，我在使用 node-vibrant 时遇到了麻烦。 你也可以尝试一下，看看你得到了什么？ 我对fs没有问题，但我认为没有添加 rn-nodeify 对 pngjs 或流到模块中的stream黑客 - 虽然只是一种预感。

编辑：如果它与 pngjs 相关，这可能是相关的： https :

（以供参考）

├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │   └── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   ├── [email protected]
│   └── [email protected]

唔。 以前的 PL #21 似乎表明 node-vibrant 曾经与 React Native 一起工作过。
我还没有尝试过 React Native。但是如果它加载lib/index.js作为入口脚本，默认的图像实现应该是 nodejs 之一。 （见 https://github.com/akfish/node-vibrant/blob/master/src/index.coffee）
您可以尝试通过以下方式自己导入节点图像：

// var Vibrant = require('node-vibrant')
// var NodeImage = require('node-vibrant/lib/image/node')

// var v = new Vibrant(uri, {Image: NodeImage})

编辑：没关系。 刚看到关注评论。 如果require('node-vibrant/lib/index')不起作用，上述方法也不起作用。

一旦我有时间，我将设置 React Native 并进行一些测试。

@stovmascript感谢有关 rn-nodeify 的提醒。 我还发现React-Nativify似乎是一种很有前途的方法，但我还没有时间尝试。 我现在正在做另一个项目，但下周会研究这个。

@chetstone Cool，反过来，感谢您对 ReactNativity 的提醒。 刚刚试了一下，我更喜欢它。 不过也有取舍。

使用 rn-nodeify，几乎所有事情都会为您处理。 您只需要记住在安装新软件包后运行 postinstall 脚本（即它将在npm install之后运行，而不是在npm install some-package --save ）。 不那么漂亮的是，除非你在 rn-nodeify 完成之前和之后保存和恢复你的 package.json，否则它会向它添加一堆东西，如果你已经添加了 postinstall 脚本，这些东西基本上不必在那里. 它也进入你的 node_modules 并直接开始搞乱 - 另一方面，如果它没有破坏任何东西，谁在乎，它被 gitignored 对吧？ 到目前为止，我一直在使用此解决方案并且对此感到满意。

ReactNativity 解决方案在 IMO 更优雅，因为您可以将自己的捆绑转换器功能提供给 RN Packager（超级酷），并且您可以使用 babel-plugin-rewrite-require 更改require()调用或import在编译期间将process或__dirname这样的节点全局变量也是如此 - rn-nodeify 为这些提供了相当广泛的 shim，但是使用 ReactNativity 方式，您必须维护自己的 shim。

使用这两种方法，我都想到了同一点......

像这样导入后：

import Vibrant from 'node-vibrant/lib';

我收到此错误：

对象原型只能是一个 Object 或 null: undefined

源自：_node_modules/inherits/inherits_browser.js:5_（继承模块的浏览器版本）。

如果您使用当前使用的节点更新此函数，它将触发新的自定义错误：

“继承”的超级构造函数必须有一个原型

这似乎是因为应该传递给这个函数的超级构造函数不是一个构造函数，而是一个实例化的类，所以当你将superCtor更改为： superCtor = superCtor.constructor ，它可以工作。

跟踪堆栈跟踪，它导致了 jimp 使用的请求包，但是我不知道是请求有问题还是 jimp 没有正确使用请求。 它很可能在 node 中运行良好，但只有在为浏览器捆绑或仅用于 react-native 时才会中断。

非常感谢详尽的报告。 那么你对 _inherits_ 的修改是否足以让节点充满活力地与 RN 一起工作，或者你仍然被卡住了？

在2016年11月6日，07:24 -0700，马丁Šťovíček [email protected] ，写道：

@chetstone (https://github.com/chetstone) 很酷，反过来，感谢您对 ReactNativity 的提醒。 刚刚试了一下，我更喜欢它。 不过也有取舍。

使用 rn-nodeify，几乎所有事情都会为您处理。 您只需要记住在安装新软件包后运行 postinstall 脚本（即它会在 npm install 之后运行，但不会在 npm install some-package --save 之后运行）。 不那么漂亮的是，除非你在 rn-nodeify 完成之前和之后保存和恢复你的 package.json，否则它会向它添加一堆东西，如果你已经添加了 postinstall 脚本，这些东西基本上不必在那里. 它也进入你的 node_modules 并直接开始搞乱 - 另一方面，如果它没有破坏任何东西，谁在乎，它被 gitignored 对吧？ 到目前为止，我一直在使用此解决方案并且对此感到满意。

ReactNativity 解决方案在 IMO 更优雅，因为您可以向 RN Packager 提供您自己的捆绑转换器功能（超级酷），并且您可以使用 babel-plugin-rewrite-require 将 require() 调用或核心节点模块的导入更改为他们在编译期间的浏览器版本。 您还可以更好地控制依赖项 - 您可以使用 node-libs-browser 或 browserify 一次性安装所有浏览器版本（两者都提供一个具有浏览器版本映射的对象，您需要配置 babel 插件）。 最重要的是，您可以有选择地为 fs 模块添加诸如 react-native-level-fs 之类的包。 您必须使用此解决方案彻底测试您的应用程序，因为它更容易出现运行时异常 - 并非所有核心节点库都具有浏览器对应项，而 rn-nodeify 进一步尝试解决此问题。 对于像 process 或 __dirname 这样的节点全局变量也是如此 - rn-nodeify 为这些提供了相当广泛的 shim，但是使用 ReactNativity 方式，您必须维护自己的 shim。

使用这两种方法，我都想到了同一点......

像这样导入后：

从 'node-vibrant/lib' 导入 Vibrant

我收到此错误：

对象原型只能是一个 Object 或 null: undefined

源自：node_modules/inherits/inherits_browser.js:5（继承模块的浏览器版本）。

如果您使用当前使用的节点（https://github.com/nodejs/node/blob/master/lib/util.js#L956-L969）更新此函数，它将触发新的自定义错误：

“继承”的超级构造函数必须有一个原型

这似乎是因为应该传递给这个函数的超级构造函数不是一个构造函数，而是一个实例化的类，所以当你改变 superCtor (https://github.com/isaacs/inherits/blob/master /inherits_browser.js#L3) 到：superCtor = superCtor.constructor，它有效。

跟踪堆栈跟踪，它导致了 jimp 使用的请求包，但是我不知道是请求有问题还是 jimp 没有正确使用请求。 它很可能在 node 中运行良好，但只有在为浏览器捆绑或仅用于 react-native 时才会中断。

—
你收到这个是因为你被提到了。
直接回复本邮件，在 GitHub 上查看（https://github.com/akfish/node-vibrant/issues/29#issuecomment-258684020），或将线程静音（https://github.com/notifications/unsubscribe -auth/AA7l1wl7ggsGTqd7RZlpwWup6T3Ookl7ks5q7eMSgaJpZM4KeOV2）。

@stovmascript终于有时间尝试使用react-nativify 。 我不认为我做到了你所做的。 似乎要使其工作所涉及的黑客数量几乎是无穷无尽的。

首先，我无法让变压器工作。 我终于发现在 rn-cli.config.js 中指定getTransformModulePath()的能力在我的 react-native (0.32.1) 版本中通过回归被删除了。 所以我通过在npm start命令中使用--transformer来解决这个问题。

然后，打包器由于某种原因找不到util模块，即使它已安装。 更奇怪的是，似乎它可以找到util一些模块（必要时png.js ），而不是其他（ _stream_readable ）。

注释掉util中_stream_readable以查看我是否可以更进一步，当jimp引用未在process定义的变量时它失败

最后，在阅读了这篇文章后，我准备放弃这种方法。 我还没有尝试过rn-nodify但根据您的经验，我认为这会浪费更多时间。

围绕实际的Pallete 库为 android 构建本机包装器似乎要简单得多。 我不懂java，但也许是时候学习了。 它在 iOS 上不起作用，但我一直在我的 iOS 应用程序中使用colorgrabber组件并取得了成功。 不像调色板那样功能齐全，但足以满足我的目的。

我刚刚发布了react-native-palette ，它将优秀的 Android Palette 类包装为原生模块。 该组件还支持 iOS 的类似功能，但存在一些问题。

最好也有一个纯 JavaScript 的解决方案，比如 node-vibrant，它可以在 iOS 上运行，因为有些缺乏原生支持。

很抱歉耽搁了很长时间。 真实的生活发生了。
根据我对上述评论的理解，该问题似乎与jimp对fs的引用有关，这在 react-native 环境中不可用。

从jimp的来源[1] ，将process.env.ENVIRONMENT为"BROWSER"将跳过需要fs模块。

一个可能的解决方法：

// Prevent jimp from requiring `fs`
process.env.ENVIRONMENT = 'BROWSER'
// Require node.js version vibrant explicitly
const Vibrant = require('node-vibrant/lib/index')
// Load image file into a Buffer in some react-native compatible way
let buf = react_native_read_file('path/to/image')
// Pass buffer to node-vibrant
Vibrant.from(buf).getPalette()

任何人都可以检查这种方法是否有效？ 谢谢。

提醒 GitHub 对问题有 👍 反应，以在不阻塞线程的情况下表示支持

您的最新版本“3.2.0-alpha”在 React Native 中崩溃并出现错误“找不到变量：self”
删除仅 1 个字符串后：
import * as Vibrant from 'node-vibrant';
app 可以正常工作，因此甚至无法在 React Native 中对其进行测试。

您的最新版本“3.2.0-alpha”在 React Native 中崩溃并出现错误 _"Can't find variable: self"_
删除仅 1 个字符串后：
import * as Vibrant from 'node-vibrant';
app 可以正常工作，因此甚至无法在 React Native 中对其进行测试。

对不起，我真的不明白，节点活跃的库是否与 RN 一起工作？

@Psiiirus它应该在非 alpha 版本中工作

我在 react-native 中得到了Can't find variable: document 。