6

このリポジトリのスターター キットに大まかに基づいて、同形の React アプリを作成しました。本番コードのビルドには webpack を使用します。

つまり、本番コードを再構築せずに、サーバー上のいくつかの環境変数の値をブラウザーのクライアント コードに公開する必要があります。環境変数の値を変更し、何も再構築することなく、次のページの更新時にクライアントに影響を与えたいと考えています。そして、それを行うためにテストを複雑にしたくありません。

私はいくつかの解決策を見つけましたが、どれも素晴らしいものではありません:

  1. Webpack の DefinePlugin を使用して、特定の環境変数の値を製品コードにハードコーディングします。ここで概説されているものと同様
  2. 環境変数をクライアントにプルするためだけに API を構築します。
  3. webpack システムの外部にある特別な .js ファイルを作成します。このファイルは、クライアントに提供される前に変更されるようにテンプレート化されます。おそらく、環境変数の値が「ウィンドウ」などの特別なグローバル変数に格納されている必要があります。

これらのアプローチの問題:

  1. 拒否されました。これは私が望むことをしません。env 変数の値を変更すると、コードを再構築する必要があります。
  2. 不必要に複雑。この API は他には必要ありません。めったに変化しない 2 つまたは 3 つの値を提供するためだけの API ですか? ロード時に API からできるだけ早く値が取り出されるようにするには、複雑さが必要になります。
  3. まだ最も近いですが、ちょっとグロスです。避けられるのであれば、webpack/React/Flux システムの外に出たくありません。ウィンドウ オブジェクトで特別なグローバル変数を作成しても機能しますが、それらのグローバル変数を使用するコンポーネント/ストア/アクションのテストが複雑になります。

私は過去に 2 と 3 の両方を行ったことがありますが、これらのソリューションで本当に知的に満足したことはありません。

助言がありますか？これは一般的な/解決済みの問題のようです。たぶん私はそれを考えすぎているだけで、3が行く方法です.

4

3 に答える 3

0

だから私が思いついた解決策はかなり簡単です。スクリプトタグ内のローカルストレージに値を保存するために、javascript のワンライナーを書くだけです。次に、アプリの起動時にフラックス ストアからそのローカル ストレージを読み取ります。

これは、index.html に追加された関連タグです。

<script type="text/javascript"><%= config %></script>

これは、提供する前に、テンプレートを使用して index.html にスプライスする文字列です。

let configJs = 'localStorage.setItem(\'ADMIN_API\', JSON.stringify(\'' + process.env.ADMIN_API + '/v3/' + '\'));';
const html = template({config: configJs});
res.status(200).send(html);

次に、アプリが起動したら、これでそれを読みます:

import ls from 'local-storage';
....
let api = ls.get('ADMIN_API');
于 2015-09-28T17:07:32.973 に答える