Node-vibrant: react-native에서 사용 가능한 버전 요청

흠. 나는 노드 모듈이 반응 네이티브에서 작동하기를 기대하는 것에 대해 순진하다고 생각합니다. 나는이 특정 문제는이 때문에 반응 네이티브 포장기 명예에게 발생하는 것으로 나타났습니다 browser 에서 필드를 package.json 브라우저 버전 대신 노드 버전의로드되도록. node-vibrant/lib/index 요구하면 이 문제를 해결할 수 있지만 다음 오류는 Requiring unknown module 'fs'

@chetstone rn-nodeify를 사용해 보셨습니까 ? 코어 노드 모듈은 실제로 노드(V8)에서 실행되지 않고 JSC에서 실행되기 때문에 RN 앱에서 기본적으로 작동하지 않습니다. 방탄은 아니지만 제 경험상 합리적으로 잘 돌아갑니다.

즉, node-vibrant에 문제가 있습니다. 당신도 그것을 시도하고 당신이 어디를 볼 수 있습니까? fs 에는 문제가 없지만 pngjs 또는 stream-to 모듈에서 stream 에 대한 rn-nodeify 핵은 추가되지 않고 있다고 생각합니다. 다만 직감일 뿐입니다.

편집: 이것은 pngjs와 관련된 경우 관련이 있을 수 있습니다: https://github.com/lukeapage/pngjs/issues/64

(참고로)

├─┬ [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은 한 번 React Native로 작업한 node-vibrant를 나타내는 것 같습니다.
나는 아직 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,

rn-nodeify를 사용하면 거의 모든 것이 알아서 처리됩니다. 새 패키지를 설치한 후에 설치 후 스크립트를 실행하는 것만 기억하면 됩니다(예: npm install 후에 실행되지만 npm install some-package --save 후에는 실행되지 않음). 그다지 예쁘지 않은 점은 rn-nodeify가 완료되기 전후에 package.json을 저장하고 복원하지 않는 한 많은 항목이 추가된다는 것입니다. . 또한 node_modules로 이동하여 직접 엉망이 되기 시작합니다. 반면에 아무 것도 손상시키지 않으면 누가 상관하지 않고 gitignored되는 것입니까? 나는 지금까지 이 솔루션을 사용해 왔으며 만족합니다.

ReactNativity 솔루션은 RN Packager에 고유한 번들 변환기 기능을 제공할 수 있고 babel-plugin-rewrite-require를 사용하여 require() 호출 또는 import 을 변경할 수 있다는 점에서 IMO보다 더 우아합니다. 컴파일 중 브라우저 버전에 대한 핵심 노드 모듈의 process 또는 __dirname 와 같은 노드 전역도 마찬가지입니다. rn-nodeify는 이에 대해 상당히 광범위한 shim을 제공하지만 ReactNativity 방식을 사용하면 자신의 shim을 유지해야 합니다.

두 가지 방법을 모두 사용하여 동일한 지점에 도달했습니다.

다음과 같이 가져온 후:

import Vibrant from 'node-vibrant/lib';

이 오류가 발생합니다.

개체 프로토타입은 개체 또는 null일 수 있습니다. 정의되지 않음

출처: _node_modules/inherits/inherits_browser.js:5_ (상속 모듈의 브라우저 버전).

현재 사용 중인 노드로 이 함수를 업데이트하면 새 사용자 지정 오류가 트리거됩니다.

"상속"할 슈퍼 생성자는 프로토타입이 있어야 합니다.

이 함수에 전달되어야 하는 수퍼 생성자가 생성자가 아니라 실제로 인스턴스화된 클래스이기 때문에 발생하는 것 같습니다. 따라서 superCtor 를 superCtor = superCtor.constructor 로 변경하면 작동합니다.

stacktrace를 따라 가면 jimp가 사용하는 요청 패키지로 이어지지만 요청 문제인지 jimp가 요청을 올바르게 사용하지 않는지 모르겠습니다. 노드에서 잘 작동할 가능성이 높지만 브라우저에 번들로 제공되거나 반응 네이티브 짝수에 대해서만 중단됩니다.

꼼꼼한 제보 정말 감사합니다. 따라서 _inherits_에 대한 수정 사항으로 RN과 함께 노드 활기찬 작업을 수행하기에 충분합니까? 아니면 여전히 막혀 있습니까?

2016년 11월 6일 07:24 -0700에 Martin Šťovíček [email protected] 은 다음과 같이 썼습니다.

@chetstone (https://github.com/chetstone) ReactNativity에 대해 알려주셔서 감사합니다. 방금 사용해보고 더 마음에 듭니다. 하지만 장단점이 있습니다.

rn-nodeify를 사용하면 거의 모든 것이 알아서 처리됩니다. 새 패키지를 설치한 후에 설치 후 스크립트를 실행하는 것만 기억하면 됩니다(즉, npm 설치 후에 실행되지만 npm install some-package --save 후에는 실행되지 않음). 그다지 예쁘지 않은 점은 rn-nodeify가 완료되기 전후에 package.json을 저장하고 복원하지 않는 한 많은 항목이 추가된다는 것입니다. . 또한 node_modules로 이동하여 직접 엉망이 되기 시작합니다. 반면에 아무 것도 손상시키지 않으면 누가 상관하지 않고 gitignored되는 것입니까? 나는 지금까지 이 솔루션을 사용해 왔으며 만족합니다.

ReactNativity 솔루션은 RN Packager에 고유한 번들 변환기 기능을 제공할 수 있고 babel-plugin-rewrite-require를 사용하여 코어 노드 모듈의 require() 호출 또는 가져오기를 다음으로 변경할 수 있다는 점에서 IMO보다 더 우아합니다. 컴파일하는 동안 브라우저 버전. 또한 종속성을 훨씬 더 많이 제어할 수 있습니다. node-libs-browser 또는 browserify를 사용하여 모든 브라우저 버전을 한 번에 설치할 수 있습니다(둘 모두 babel 플러그인을 구성하는 데 필요한 브라우저 버전에 대한 매핑이 있는 개체를 제공합니다. ). 그 위에 fs 모듈에 대해 react-native-level-fs와 같은 패키지를 선택적으로 추가할 수 있습니다. 런타임 예외가 발생하기 쉽기 때문에 이 솔루션을 사용하여 앱을 철저히 테스트해야 합니다. 모든 핵심 노드 라이브러리에 브라우저 대응 기능이 있는 것은 아니며 rn-nodeify는 이 문제를 해결하기 위해 더 나아갑니다. 프로세스 또는 __dirname과 같은 노드 전역에도 동일하게 적용됩니다. rn-nodeify는 이에 대해 상당히 광범위한 shim을 제공하지만 ReactNativity 방식을 사용하면 자신의 shim을 유지 관리해야 합니다.

두 가지 방법을 모두 사용하여 동일한 지점에 도달했습니다.

다음과 같이 가져온 후:

'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) to: superCtor = superCtor.constructor, 작동합니다.

stacktrace를 따라 가면 jimp가 사용하는 요청 패키지로 이어지지만 요청 문제인지 jimp가 요청을 올바르게 사용하지 않는지 모르겠습니다. 노드에서 잘 작동할 가능성이 높지만 브라우저에 번들로 제공되거나 반응 네이티브 짝수에 대해서만 중단됩니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 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 모듈을 찾을 수 없습니다. 더 이상하게도 일부 모듈( png.js )에서는 필요할 때 util 찾을 수 있지만 다른 모듈에서는 찾을 _stream_readable ).

주석의 요구 util 에서 _stream_readable 내가 더 얻을 수 있다면, 그것은 실패를 참조하는 경우 jimp 에 정의되지 않은 변수라고 process 틈 메우는 나무.

마지막으로 이 기사를 읽은 후 이 접근 방식을 포기할 준비가 되었습니다. 나는 rn-nodify 시도하지 않았지만 귀하의 경험을 감안할 때 더 많은 시간을 낭비하게 될 것이라고 생각합니다.

실제 팔레트 라이브러리 주위에 Android용 기본 래퍼를 빌드하는 것이 훨씬 더 간단해 보입니다. 나는 자바를 모르지만 아마도 배울 시간입니다. iOS에서는 작동하지 않지만 iOS 앱에서 colorgrabber 구성 요소를

우수한 Android Palette 클래스를 기본 모듈로 래핑하는 react-native-palette 를 방금 게시했습니다. 이 구성 요소는 iOS에서도 유사한 기능을 지원하지만 몇 가지 문제가 있습니다.

기본 지원이 다소 부족하기 때문에 iOS에서 작동하는 node-vibrant와 같은 javascript 전용 솔루션도 있으면 좋을 것입니다.

오래 지연되어 죄송합니다. 실제 생활이 일어났습니다.
위의 의견에서 내가 이해한 바로는 jimp fs 대한 jimp 참조와 관련된 것으로 보입니다. 이는 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"가 "Can't find variable: self" 오류와 함께 React Native에서 충돌
1개의 문자열만 삭제한 후:
import * as Vibrant from 'node-vibrant';
앱이 작동하므로 React Native에서 테스트할 가능성조차 없습니다.

최신 버전 "3.2.0-alpha"가 _"Can't find variable: self"_ 오류와 함께 React Native에서 충돌합니다.
1개의 문자열만 삭제한 후:
import * as Vibrant from 'node-vibrant';
앱이 작동하므로 React Native에서 테스트할 가능성조차 없습니다.

죄송합니다. 정말 이해가 안 갑니다. node-vibrant lib가 RN과 함께 작동합니까?

@Psiiirus 비알파 빌드에서 작동해야 합니다.

반응 네이티브에서 Can't find variable: document 를 받고 있습니다.