Node-vibrant: Minta versi yang dapat digunakan dalam reaksi asli

Hmmm. Saya kira saya naif tentang mengharapkan modul simpul untuk bekerja dalam reaksi asli. Saya telah menemukan bahwa masalah khusus ini muncul karena pembuat paket asli-reaksi menghormati bidang browser di package.json sehingga versi peramban dimuat alih-alih versi simpul. membutuhkan node-vibrant/lib/index mengatasi ini, tetapi kesalahan berikutnya adalah Requiring unknown module 'fs'

@chetstone Sudahkah Anda mencoba rn-nodeify ? Modul simpul inti tidak akan berfungsi secara default di aplikasi RN karena tidak benar-benar berjalan pada simpul (V8), tetapi JSC. Ini tidak antipeluru, tetapi berjalan cukup baik menurut pengalaman saya.

Yang mengatakan, saya mengalami masalah dengan node-vibrant. Bisakah Anda mencobanya juga dan melihat dari mana Anda mendapatkannya? Saya tidak punya masalah dengan fs , tapi saya pikir rn-nodeify hacks untuk stream di pngjs atau modul stream-to tidak ditambahkan - hanya firasat.

Sunting: Ini mungkin relevan jika terkait pngjs: https://github.com/lukeapage/pngjs/issues/64

(Sebagai referensi)

├─┬ [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]

Hmm. PL #21 sebelumnya tampaknya menunjukkan node-vibrant pernah bekerja dengan React Native.
Saya belum mencoba React Native.Tetapi jika memuat lib/index.js sebagai skrip entri, implementasi gambar default harus menjadi nodejs. (lihat https://github.com/akfish/node-vibrant/blob/master/src/index.coffee)
Anda dapat mencoba mengimpor sendiri gambar simpul dengan:

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

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

Sunting: tidak apa-apa. Baru saja melihat komentar yang diikuti. Jika require('node-vibrant/lib/index') tidak berfungsi, metode di atas juga tidak akan berfungsi.

Saya akan mengatur React Native dan melakukan beberapa pengujian begitu saya punya waktu.

@stovmascript terima kasih atas informasi sebelumnya tentang rn-nodeify. Saya juga menemukan React-Nativify yang sepertinya merupakan pendekatan yang menjanjikan tetapi saya belum sempat mencobanya. Saya sedang mengerjakan proyek lain saat ini tetapi akan memeriksanya minggu depan.

@chetstone Keren, sebaliknya, terima kasih atas informasi sebelumnya tentang ReactNativity. Baru dicoba dan saya lebih suka. Ada pengorbanan meskipun.

Dengan rn-nodeify, hampir semuanya diurus untuk Anda. Anda hanya perlu ingat untuk menjalankan skrip postinstall setelah menginstal paket baru (yaitu skrip akan dijalankan setelah npm install , tetapi tidak setelah npm install some-package --save ). Apa yang tidak begitu cantik adalah bahwa kecuali Anda menyimpan dan memulihkan package.json Anda sebelum dan sesudah rn-nodeify selesai, itu akan menambahkan banyak hal ke dalamnya, yang pada dasarnya tidak harus ada di sana jika Anda telah menambahkan skrip postinstall . Juga masuk ke node_modules Anda dan langsung mulai mengotak-atik - di sisi lain, jika tidak merusak apa pun, siapa yang peduli, itu di-gitignored kan? Saya telah menggunakan solusi ini sejauh ini dan senang dengan itu.

Solusi ReactNativity IMO lebih elegan karena Anda dapat menyediakan fungsi transformator bundel Anda sendiri ke RN Packager (sangat keren) dan Anda dapat menggunakan babel-plugin-rewrite-require untuk mengubah panggilan require() atau import s modul simpul inti ke versi browser mereka selama kompilasi. Anda juga memiliki lebih banyak kontrol atas dependensi - Anda dapat menginstal semua versi browser sekaligus dengan node-libs-browser atau browserify (keduanya menyediakan objek dengan pemetaan ke versi browser, yang Anda perlukan untuk mengonfigurasi plugin babel ). Selain itu, Anda dapat secara selektif menambahkan paket seperti react-native-level-fs untuk modul fs. Anda harus menguji aplikasi Anda secara menyeluruh dengan solusi ini karena lebih rentan terhadap pengecualian runtime - tidak semua lib node inti memiliki rekan browser dan rn-nodeify melangkah lebih jauh untuk mencoba mengatasi ini. Hal yang sama berlaku untuk node global seperti process atau __dirname - rn-nodeify menyediakan shim yang cukup luas untuk ini, tetapi dengan cara ReactNativity, Anda harus mempertahankan shim Anda sendiri.

Dengan kedua metode tersebut, saya sampai pada pemikiran yang sama...

Setelah mengimpor seperti ini:

import Vibrant from 'node-vibrant/lib';

Saya mendapatkan kesalahan ini:

Prototipe objek hanya boleh berupa Objek atau nol: tidak terdefinisi

berasal dari: _node_modules/inherits/inherits_browser.js:5_ (versi browser dari modul mewarisi).

Jika Anda memperbarui fungsi ini dengan node apa

Konstruktor super untuk "mewarisi" harus memiliki prototipe

Tampaknya terjadi karena konstruktor super yang seharusnya diteruskan ke fungsi ini bukanlah konstruktor, tetapi sebenarnya kelas yang dipakai, jadi ketika Anda mengubah superCtor menjadi: superCtor = superCtor.constructor , itu berfungsi.

Mengikuti stacktrace, itu mengarah ke paket permintaan yang digunakan oleh jimp, tetapi apakah itu masalah dengan permintaan atau jimp tidak menggunakan permintaan dengan benar, saya tidak tahu. Kemungkinan besar berfungsi dengan baik di simpul, tetapi hanya rusak ketika dibundel untuk browser atau hanya untuk reaksi asli.

Terima kasih banyak atas laporannya yang menyeluruh. Jadi, apakah modifikasi Anda pada _inherits_ cukup untuk membuat node-vibrant bekerja dengan RN atau apakah Anda masih buntu?

Pada 6 November 2016, 07:24 -0700, Martin ovíček [email protected] , menulis:

@chetstone (https://github.com/chetstone) Keren, sebaliknya, terima kasih atas informasi sebelumnya tentang ReactNativity. Baru dicoba dan saya lebih suka. Ada pengorbanan meskipun.

Dengan rn-nodeify, hampir semuanya diurus untuk Anda. Anda hanya perlu ingat untuk menjalankan skrip postinstall setelah menginstal paket baru (yaitu skrip akan berjalan setelah npm install, tetapi tidak setelah npm install some-package --save). Apa yang tidak begitu cantik adalah bahwa kecuali Anda menyimpan dan memulihkan package.json Anda sebelum dan sesudah rn-nodeify selesai, itu akan menambahkan banyak hal ke dalamnya, yang pada dasarnya tidak harus ada di sana jika Anda telah menambahkan skrip postinstall . Juga masuk ke node_modules Anda dan langsung mulai mengotak-atik - di sisi lain, jika tidak merusak apa pun, siapa yang peduli, itu di-gitignored kan? Saya telah menggunakan solusi ini sejauh ini dan senang dengan itu.

Solusi ReactNativity IMO lebih elegan karena Anda dapat menyediakan fungsi transformator bundel Anda sendiri ke RN Packager (sangat keren) dan Anda dapat menggunakan babel-plugin-rewrite-require untuk mengubah panggilan require() atau impor modul node inti ke versi browser mereka selama kompilasi. Anda juga memiliki lebih banyak kontrol atas dependensi - Anda dapat menginstal semua versi browser sekaligus dengan node-libs-browser atau browserify (keduanya menyediakan objek dengan pemetaan ke versi browser, yang Anda perlukan untuk mengonfigurasi plugin babel ). Selain itu, Anda dapat secara selektif menambahkan paket seperti react-native-level-fs untuk modul fs. Anda harus menguji aplikasi Anda secara menyeluruh dengan solusi ini karena lebih rentan terhadap pengecualian runtime - tidak semua lib node inti memiliki rekan browser dan rn-nodeify melangkah lebih jauh untuk mencoba mengatasi ini. Hal yang sama berlaku untuk node global seperti process atau __dirname - rn-nodeify menyediakan shim yang cukup luas untuk ini, tetapi dengan cara ReactNativity, Anda harus mempertahankan shim Anda sendiri.

Dengan kedua metode tersebut, saya sampai pada pemikiran yang sama...

Setelah mengimpor seperti ini:

impor Vibrant dari 'node-vibrant/lib'

Saya mendapatkan kesalahan ini:

Prototipe objek hanya boleh berupa Objek atau nol: tidak terdefinisi

berasal dari: node_modules/inherits/inherits_browser.js:5 (versi browser dari modul pewarisan).

Jika Anda memperbarui fungsi ini dengan node yang saat ini digunakan (https://github.com/nodejs/node/blob/master/lib/util.js#L956-L969), ini akan memicu kesalahan kustom baru:

Konstruktor super untuk "mewarisi" harus memiliki prototipe

Tampaknya terjadi karena konstruktor super yang seharusnya diteruskan ke fungsi ini bukanlah konstruktor, tetapi sebenarnya kelas yang dipakai, jadi ketika Anda mengubah superCtor (https://github.com/isaacs/inherits/blob/master /inherits_browser.js#L3) ke: superCtor = superCtor.constructor, berhasil.

Mengikuti stacktrace, itu mengarah ke paket permintaan yang digunakan oleh jimp, tetapi apakah itu masalah dengan permintaan atau jimp tidak menggunakan permintaan dengan benar, saya tidak tahu. Kemungkinan besar berfungsi dengan baik di simpul, tetapi hanya rusak ketika dibundel untuk browser atau hanya untuk reaksi asli.

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub (https://github.com/akfish/node-vibrant/issues/29#issuecomment-258684020), atau nonaktifkan utas (https://github.com/notifications/unsubscribe -auth/AA7l1wl7ggsGTqd7RZlpwWup6T3Ookl7ks5q7eMSgaJpZM4KeOV2).

@stovmascript Akhirnya punya waktu untuk mencoba react-nativify . Saya tidak berpikir saya berhasil sejauh yang Anda lakukan. Tampaknya jumlah peretasan yang terlibat untuk membuat ini berfungsi hampir tidak ada habisnya.

Pertama, saya tidak bisa membuat transformator bekerja. Saya akhirnya menemukan bahwa kemampuan untuk menentukan getTransformModulePath() di rn-cli.config.js telah dihapus melalui regresi dalam versi react-native saya (0.32.1). Jadi saya mengatasinya dengan menggunakan --transformer dalam perintah npm start .

Kemudian, pembuat paket karena suatu alasan tidak dapat menemukan modul util meskipun telah diinstal. Lebih aneh lagi, tampaknya ia dapat menemukan util ketika diperlukan dari beberapa modul ( png.js ) tetapi tidak yang lain ( _stream_readable ).

Mengomentari persyaratan util di _stream_readable untuk melihat apakah saya bisa melangkah lebih jauh, itu gagal ketika jimp merujuk ke variabel yang tidak didefinisikan dalam process shim.

Akhirnya, setelah membaca artikel ini , saya siap untuk menyerah pada pendekatan ini. Saya belum mencoba dengan rn-nodify tetapi mengingat pengalaman Anda, saya pikir itu akan membuang lebih banyak waktu.

Tampaknya jauh lebih mudah untuk membangun pembungkus asli untuk Android di sekitar perpustakaan palet yang sebenarnya . Saya tidak tahu java, tapi mungkin sudah waktunya untuk belajar. Dan itu tidak akan berfungsi di iOS, tetapi saya telah menggunakan komponen colorgrabber di aplikasi iOS saya dengan sukses yang baik. Tidak berfitur lengkap seperti palet, tetapi cukup baik untuk tujuan saya.

Saya baru saja menerbitkan react-native-palette yang membungkus kelas Android Palette yang sangat baik sebagai modul asli. Komponen ini juga mendukung fungsi serupa untuk iOS, tetapi dengan beberapa masalah.

Akan menyenangkan juga memiliki solusi khusus javascript seperti node-vibrant yang akan berfungsi di iOS karena dukungan asli agak kurang.

Maaf atas keterlambatan yang lama. Kehidupan nyata terjadi.
Dari apa yang saya pahami dari komentar di atas, masalahnya tampaknya terkait dengan referensi jimp ke fs , yang tidak tersedia di lingkungan asli-reaksi.

Dari jimp 's source [1] , menyetel process.env.ENVIRONMENT ke "BROWSER" akan melewati modul fs .

Solusi yang mungkin:

// 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()

Adakah yang bisa memeriksa apakah pendekatan ini akan berhasil? Terima kasih.

Pengingat bahwa GitHub memiliki 👍 reaksi terhadap masalah untuk menunjukkan dukungan tanpa menyumbat utas

Versi terbaru "3.2.0-alpha" Anda mogok di React Native dengan kesalahan "Tidak dapat menemukan variabel: self"
dan setelah menghapus hanya 1 string:
import * as Vibrant from 'node-vibrant';
aplikasi berfungsi, jadi tidak ada kemungkinan untuk mengujinya di React Native.

Versi terbaru "3.2.0-alpha" Anda mogok di React Native dengan kesalahan _"Tidak dapat menemukan variabel: self"_
dan setelah menghapus hanya 1 string:
import * as Vibrant from 'node-vibrant';
aplikasi berfungsi, jadi tidak ada kemungkinan untuk mengujinya di React Native.

maaf saya tidak begitu mengerti, apakah lib node-vibrant bekerja dengan RN atau tidak?

@Psiiirus itu harus bekerja di non-alpha build

Saya mendapatkan Can't find variable: document dalam reaksi-asli.