2017-02-13 7 views
10

.envファイルからReact Nativeプロジェクトに環境変数を読み込むためにbabelプラグインを使用していますが、.envファイルへの変更はjavascriptファイルをインポートするまでロードされませんそれらは変化する。私は、このファイルが変更された場合に、反応ネイティブのパッケージャに再コンパイルを指示する方法が必要です。反応しないネイティブパッケージャに非javascriptファイルを見るように指示する

  1. 特定のファイル(.env)が変更されたときに、プロジェクト全体を単に再トランスポートします。
  2. 再transpilesは、特定の文字列を含むこれらのファイルは、

プラグイン/ミドルウェアを書き込むことによってこれを行う簡単な方法はありfooを言うの?反応のネイティブパッケージャがリッスンしているイベントを起動する別のバックグラウンドスクリプトですか?

[コメントへの返信でEDIT]

私の現在の.babelrcbabel-plugin-react-native-config私はreact-native-configパッケージと一緒にホットスワップ変数を行うために書いたプラグインです以下、です。

{ 
    "presets": [ 
    "react-native" 
    ], 
    "plugins": [ 
    ["babel-plugin-espower", { 
     "sourceRoot": "./App" 
    }], 
    "transform-flow-strip-types" 
    ], 
    "env": { 
    "production": { 
     "plugins": [ 
     "babel-plugin-unassert", 
     ] 
    }, 
    "development": { 
     "plugins": [ 
     ["babel-plugin-react-native-config", { envfile: ".env" }] 
     ] 
    } 
    } 
} 

問題があるのは、反応ネイティブのパッケージャがjavascriptファイルのみを監視することです。バベルは何とか反応し、ネイティブするか、警備員をいくつかのファイルが再コンパイル必要があることを知らせるために上向きに話すことができない限り、私は私がすることを決定し、[EDIT 2]

...、私のバベル構成が役立つ変更

を考えていません反応したネイティブのパッケージャーは、監視員を使用してファイルを監視します。パッケージャが実行されている間、私はこの時計を削除すると、私は(とwatchman watch-del-allを実行した後)パッケージャを起動した後watchman watch-listを行う、私は

{ 
    "version": "4.6.0", 
    "roots": [ 
     "/path/to/my/project" 
    ] 
} 

を取得する。また、何も、その視点から(JSのISNを起こりません例えば、アップデートを受け取っていないので変更しないでください)、その後、私はこのパッケージを再起動すると、この時計を作り直してすべてを透明化します。

もっと良い方法がない限り、(1)反応パッケージャを殺す(2)私のアプリケーションディレクトリで時計を殺す(3)ノードパッケージャを再起動するための監視人のトリガを作成する必要があります。これは遅くてハッキリですが、私はそれが機能するかどうかを見たいと思います。

これは一般的な方法ではうまく動作しませんでしたが、私はさまざまなことを試しています。

+0

あなたの現在のバベルの設定についてもっと詳しく説明できますか?ありがとうございました –

+0

@セバスチャンはあなたの要求された詳細で更新しました。 – JeremyKun

+0

このスレッドがあなたを助けることができるかどうか確認してください。 https://github.com/mjohnston/react-native-webpack-server/issues/63 – arunprakashpj

答えて

2

私はこの質問をしてから2週間が経過していますので、私は一緒に座っていた(恐ろしい)回避策を投稿します。私はこの質問を未回答のままにして、これよりも(ハッキリではない)新しい答えを受け入れます。

反応するネイティブパッケージャはwatchmanを使用してファイルシステムの変更を監視し、一部のJSファイルが変更されたというイベントが発生すると、ファイルが実際に変更されたかどうかを調べ、これは、反応パッケージャがそれが非常に賢明だと思ってdiffがない更新を無視することができるので、関連するJSファイルがtouch esという看守トリガーのような簡単なことをしないようにします。なんでも。

だから私のソリューションは、clear_env_cacheMakefileで、次の(偽の)ターゲットであるmake clear_env_cacheを呼び出し.env変更、上の警備員のトリガーを作成することです。

# get the PID of the react packager 
pid := $(shell lsof -i:8081 | grep node | awk '{print $$2;}' | head -n 1) 

# Kill files that the packager uses to determine whether it needs to 
# re-transpile a js file, then restart the packager 
clear_env_cache: 
    find ${TMPDIR}/react-native-packager-cache-* -name "my_pattern" | xargs rm 
    kill -9 $(pid) || echo "no packager running" 
    nohup node node_modules/react-native/local-cli/cli.js start > /dev/null 2>&1 & 

my_patternは、プロジェクトのレイアウトによって異なります。私にとっては、Settings.jsと呼ばれるすべてのenvvarsをインポートするファイルが1つあるので、パターンは"*Settings*"です。このターゲットは基本的に、ファイルが変更されるたびにパッケージャを強制終了して再起動することに注意してください。ノードのパッケージャにはnohupが含まれているため、プロセスをもう見ることはできません。あなたがパッケージャの出力を見る必要がない限り、大したことではありません。

これをトリガする警備員-CLIコマンドはwatchman-make --root . -p .env -t clear_env_cacheあると利便性のために、私はnohupsこのコマンドというmakeターゲットを設定します。

# Run `make hotswap_env` to allow envvar changes to show up in the react-native packager. 
hotswap_env: 
    nohup watchman-make --root . -p .env -t clear_env_cache > /dev/null 2>&1 & 

は、今私は(一度、システムのブートあたり)make hotswap_envを実行することができますし、それが引き金となります.envが変更され、パッケージャサーバーが継続的に動作していることを確認します。

免責事項:このスクリプトは移植されていない可能性があり、間違いなく脆弱です。警告欄とYMMVとIANALとそのすべて。移植性の改善については歓迎します。

関連する問題