問題タブ [envify]

Redux からの警告の背後にある問題に対処しようとして、React または Redux を使用して本番環境での使用に最適化されたビルドを生成するために envifying が必要なステップであることを説明するアドバイスに出くわしました。Envifyingは、 などのノード固有の環境変数を などprocess.env.NODE_ENVの実際の値に置き換えるプロセスとして説明されています'production'。

Envifying が必要であり、上記の説明が正しいことを受け入れると、React や Redux などのクライアント側ライブラリにノード固有の環境変数が含まれていると想定されているように見えるため、混乱します。ええ、特にこれらのライブラリは、Isomorphic/Universal JavaScript アプリケーションの構築に人気があることは知っていますが、驚くべきことです。私はこれを正しく理解していますか？process.env.NODE_ENVもしそうなら、ノードの外でどこで使用されているかを知る必要があるパターンの説明はありますか?

アドバイスを正しく理解していれば、Webpack を使用している場合は、そのDefinePluginようなプラグインを使用することをお勧めします。

これには、NODE_ENV 変数を、クライアント側コード用に生成するビルドのターゲット環境に設定する必要があるようにも見えます。ビルド サーバーに環境変数を設定して、デプロイ先のサーバーで実際のコードが実行される環境を反映しているため、これは二重に奇妙です。

これはすべて、一般的なパターンに関して何かが欠けているように感じさせます。

関連情報：

• https://github.com/reactjs/redux/issues/1029
• https://github.com/reactjs/redux/issues/1298

browserifyでjavascriptプロジェクトで環境変数を使用するための解決策は何ですか?
私の現在のプロジェクトでは、laravel を elixir と browserify で使用しており、ennify を追加しようとしていましたが、それを自分の elixir コードに実装する方法がわかりません:

基本的に、API URL (dev/prod) には env が必要なので、ルートに .env.json を配置してから、何らかの方法でこれらの変数を js コードに取り込むのが最善です。

アイデアやより良い解決策はありますか？

React bundle.js のサイズを縮小しようとしています。

余分な開発コードをすべて使用および削除するために、 Envify を Browserify で使用process.env.NODE_ENVして文字列「production」に置き換えようとしています。uglifyjs

これが私のコマンドです：browserify -t [envify --NODE_ENV production] assets/js/app.js -o assets/js/bundle.js

したがって、私の bundle.js は正常に作成されましたが、まだいくつかのインスタンスがありますprocess.env.NODE_ENV。

私の「app.js」または他のコンポーネントにあるすべてのインスタンスは、「実稼働」に正しく置き換えられます。

...しかし、node_modulesフォルダーから必要なすべてのモジュール (反応など) では、インスタンスは置き換えられません。

どんな助けでも大歓迎です！THX！

******************* 編集 **********************

JMMのソリューションは元の質問にうまく答えましたが、私が使用しているため、まだ問題がありましたReact-Router(私は思います)。

状況を示す簡単な例を作成しました。

ここに私のapp.jsファイルがあります:

を実行すると、まだbundle.js に のNODE_ENV=production browserify -t envify assets/js/app.js -o assets/js/bundle.jsインスタンスがいくつかあります。process.env.NODE_ENV

bundle.jswith:を作成するだけでbrowserify assets/js/app.js -o assets/js/bundle.js回避策を見つけ、次にバンドルでenvifyを実行します:NODE_ENV=production envify assets/js/bundle.js > assets/js/bundle2.js

これで問題は解決しましたがreact-router、browserify と envify を一緒に動作させない理由はまだわかりません。

これが同様の問題を抱えている他の人に役立つことを願っています!!

環境に基づいて、reactjs コンポーネント (例: ホスト名、トークン、API URL など) に一連のグローバル変数が必要です。しかし、個別にjsに追加したくありません。prod:{hostname:example.com, api-url:prod, etc} と dev:{hostname:localhost.com, api-url:dev, etc} を設定するための project.config ファイルを作成したいので、インストールしましたLoose-envify ですが、var ごとに指定する必要があります。

browserify で複数の変換を実行しようとしています。

ディレクトリに次のファイルがあります

• dev.json
• stage.json
• prod.json
• index.js

json ファイルは、環境固有の構成ファイルです。

index.js :

var mode = process.env.APP_ENV; module.exports = require('./' + mode + '.json');

私は、envify 変換を使用して dev/prod/stage と configurify を選択し、動的式を評価しています。

Envenify を実行しただけでは正常に動作しますが、envify に続いて configurify を使用すると、「./undefined.json」が見つからないというエラーが表示されます。

どんな助けでも大歓迎です。

requireモジュールは実行時ではなくコンパイル時にバンドルされるため、条件付きで browserifyを使用できないことはわかっています。条件付きでモジュールを削除するのはどうですか?

画像ギャラリーを作成できるアプリがあるとします。ギャラリーは編集することもできます (画像の並べ替えなど)。しかし、ギャラリーのレンダリングと編集は結合されており、完全に分離することはできません。しかし、ギャラリーを展開するために編集機能は必要なく、どのモジュールが使用されているかはわかっています。2 つの異なるバンドルを作成したいと考えています。1 つは編集機能を備え、もう 1 つはほとんどの編集コードを削除して編集機能を備えていません。私がしたことはenvify、uglify のデッド コードの削除を使用して、自分のコードを小さなバンドルから除外することです。

前 (thing.js)

後 (thing.js)

これはうまく機能し、エディター バンドルはすでに小さくなっています。そして、他のバンドルがその機能を使用することは決してないことを知っているので、thing何もエクスポートせず、空のモジュールを使用しても問題ありません。

ここで問題です。thing.jsたとえば、モジュールが必要な場合は、デッド コードの削除後に誰も使用していなくてもpicaバンドルされます。

前 (thing.js)

後 (thing.js)

要約すると、私のバンドルにはpicaライブラリが含まれるようになりましたが、誰もそれを必要としません。それを必要とするコードはデッド コードでしたが、uglify は完全に削除できることを明らかに理解できませんpica。