Node-vibrant: react-nativeで使用可能なバージョンをリクエストする

うーん。 私はノードモジュールがreact-nativeで動作することを期待することについて素朴だと思います。 この特定の問題が反応し、ネイティブパッケージャ優等ので生じること、私を見つけたbrowserフィールドpackage.jsonブラウザのバージョンは、代わりにノードのバージョンでロードされるように。 node-vibrant/lib/index要求することでこれを回避できますが、次のエラーはRequiring unknown module 'fs'

@chetstone rn-nodeifyを試しましたか？ コアノードモジュールは、実際にはノード（V8）ではなく、JSCで実行されるため、RNアプリではデフォルトで機能しません。 防弾ではありませんが、私の経験ではかなりうまく機能します。

そうは言っても、私はノード活気に問題を抱えています。 あなたもそれを試して、あなたがどこに行くのか見ることができますか？ fsに問題はありませんが、pngjsまたはstream-toモジュールでのstream rn-nodeifyハックは追加されていないと思います。

編集：これは、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は、ReactNativeで動作したときにノードが活気に満ちていることを示しているようです。
私はまだReactNativeを試していません。ただし、エントリスクリプトとして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をセットアップし、時間が取れたらテストを行います。

@ stovmascriptrn -nodeifyについてのヘッズアップに感謝します。 また、 React-Nativifyは有望なアプローチのようですが、試す時間がありませんでした。 私は現在別のプロジェクトに取り組んでいますが、来週調査する予定です。

@chetstone Cool、次に、ReactNativityについてのヘッズアップに感謝します。 試してみたところ、もっと気に入っています。 ただし、トレードオフがあります。

rn-nodeifyを使用すると、ほとんどすべてが自動的に処理されます。 あなたが唯一の新しいパッケージをインストールした後、インストール後のスクリプトを実行するために覚えている（すなわち、それは後に実行されますnpm installではなく、後にnpm install some-package --save ）。 それほどきれいではないのは、rn-nodeifyが終了する前後にpackage.jsonを保存して復元しない限り、たくさんのものが追加されることです。これは、インストール後のスクリプトを追加した場合、基本的にそこにある必要はありません。 。 また、それはあなたのnode_modulesに入り、直接混乱し始めます-一方、それが何も壊さなければ、誰が気にしますか、それは無視されますよね？ 私はこれまでこのソリューションを使用しており、満足しています。

ReactNativityソリューションはIMOよりエレガントで、独自のバンドルトランスフォーマー関数をRN Packagerに提供でき（超クール）、babel-plugin-rewrite-requireを使用してrequire()呼び出しまたはimportを変更できます。コンパイル中にコアノードモジュールのprocessや__dirnameようなノードグローバルにも同じことが言えます-rn-nodeifyはこれらにかなり広範なシムを提供しますが、ReactNativityの方法では、独自のシムを維持する必要があります。

どちらの方法でも、同じ考えにたどり着きました...

このようにインポートした後：

import Vibrant from 'node-vibrant/lib';

このエラーが発生します：

オブジェクトのプロトタイプは、オブジェクトまたはnullのみである可能性があります：未定義

発信元：_node_modules / inherits / inherits_browser.js：5_（継承モジュールのブラウザバージョン）。

この関数を現在使用している

「継承」するスーパーコンストラクターにはプロトタイプが必要です

この関数に渡されるはずのスーパーコンストラクターはコンストラクターではなく、実際にはインスタンス化されたクラスであるため、発生しているようです。したがって、 superCtorをsuperCtor = superCtor.constructorに変更すると、機能します。

スタックトレースに続いて、それはjimpによって使用されるリクエストパッケージにつながりますが、それがリクエストの問題なのか、jimpがリクエストを正しく使用していないのかはわかりません。 ほとんどの場合、ノードで正常に機能しますが、ブラウザー用にバンドルされている場合、またはreact-nativeの場合にのみ機能します。

徹底的な報告をありがとうございました。 では、ノードを活気に満ちたRNで動作させるには、_inherits_を変更するだけで十分ですか、それともまだ行き詰まっていますか？

2016年11月6日、7：24 -0700で、マーティンŠťovíčekの[email protected]は、書きました：

@chetstone （https://github.com/chetstone）かっこいい、ReactNativityについてのヘッズアップに感謝します。 試してみたところ、もっと気に入っています。 ただし、トレードオフがあります。

rn-nodeifyを使用すると、ほとんどすべてが自動的に処理されます。 新しいパッケージをインストールした後、インストール後のスクリプトを実行することを忘れないでください（つまり、npmのインストール後に実行されますが、npmのインストール後には実行されません-package --save）。 それほどきれいではないのは、rn-nodeifyが終了する前後にpackage.jsonを保存して復元しない限り、たくさんのものが追加されることです。これは、インストール後のスクリプトを追加した場合、基本的にそこにある必要はありません。 。 また、それはあなたのnode_modulesに入り、直接混乱し始めます-一方、それが何も壊さなければ、誰が気にしますか、それは無視されますよね？ 私はこれまでこのソリューションを使用しており、満足しています。

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はこれらにかなり広範なシムを提供しますが、ReactNativityの方法では、独自のシムを維持する必要があります。

どちらの方法でも、同じ考えにたどり着きました...

このようにインポートした後：

'node-vibrant / lib'からVibrantをインポートします

このエラーが発生します：

オブジェクトのプロトタイプは、オブジェクトまたはnullのみである可能性があります：未定義

発信元：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がリクエストを正しく使用していないのかはわかりません。 ほとんどの場合、ノードで正常に機能しますが、ブラウザー用にバンドルされている場合、または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 ）。

_stream_readableのutilの要件をコメントアウトして、さらに先に進むことができるかどうかを確認しましたが、 jimpがprocess定義されていない変数をjimpしたときに失敗しましたシム。

最後に、この記事を読んだ後、私はこのアプローチをあきらめる準備ができています。 私はrn-nodify試したことがありませんが、あなたの経験を考えると、もっと時間が無駄になると思います。

実際のパレットライブラリの周りにAndroid用のネイティブラッパーを構築する方がはるかに簡単なようです。 私はJavaを知りませんが、多分それは学ぶ時間です。 また、iOSでは機能しませんが、iOSアプリでcolorgrabberコンポーネントを使用して成功しています。 パレットほどフル機能ではありませんが、私の目的には十分です。

優れたAndroidPaletteクラスをネイティブモジュールとしてラップするreact-native-paletteを公​​開しました。 このコンポーネントはiOSでも同様の機能をサポートしていますが、いくつかの問題があります。

ネイティブサポートがやや不足しているため、iOSで動作するnode-vibrantなどのjavascriptのみのソリューションがあると便利です。

長い遅れでごめんなさい。 実生活が起こった。
上記のコメントから私が理解していることから、この問題は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」がReactNativeでクラッシュし、 「変数が見つかりません：self」というエラーが表示されます
たった1つの文字列を削除した後：
import * as Vibrant from 'node-vibrant';
アプリは動作するため、ReactNativeでテストする可能性すらありません。

最新バージョン「3.2.0-alpha」がReactNativeでクラッシュし、エラー_「変数が見つかりません：self」_
たった1つの文字列を削除した後：
import * as Vibrant from 'node-vibrant';
アプリは動作するため、ReactNativeでテストする可能性すらありません。

申し訳ありませんが、実際には取得できません。ノードに活気のあるlibがRNで動作しているかどうか。

@Psiiirus非アルファビルドで動作するはずです

私はreact-nativeでCan't find variable: documentを取得しています。