Envify CLIが削除しないprocess.env.NODE_ENV

Question

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

uglifyjsを使用して追加の開発コードをすべて削除するには、BrowserifyでEnvifyを使用してprocess.env.NODE_ENVを文字列 "production"に置き換えようとしています。

は、ここに私のコマンドです：

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（私は思う）を使っているので問題は残っていました。

状況を示す簡単な例を作成しました。私はNODE_ENV=production browserify -t envify assets/js/app.js -o assets/js/bundle.jsを実行した場合、私はまだbundle.jsにprocess.env.NODE_ENVのいくつかの事例を持っている

var React = require('react');   
var ReactDOM = require('react-dom'); 
var Router = require('react-router').Router; 
var Route = require('react-router').Route; 

var Example = React.createClass({ 
    render: function(){ 
     console.log(process.env.NODE_ENV); 
     if (process.env.NODE_ENV === "development") { 
      console.log('Development Version'); 
     } else { 
      console.log('Production Version'); 
     } 
     return <span>Hello World!</span>; 
    } 
}); 

var AppRoutes = (<Route name="/" path="/" component={Example} />); 


ReactDOM.render(
    (<Router> 
     {AppRoutes} 
    </Router>), 
    document.getElementById('ExampleApp') 
    ); 

：ここ

は私app.jsファイルです。

私は単純にbundle.jsを作成することによって回避策が見つかりました：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を許可していない理由を私はまだわかりませんよ一緒に働くことを願っています。

私はこれが他の人に同様の問題を引き起こすのを助けてくれることを願っています!!

Answer 1

Browserifyはnode_modulesのものでトランスフォームを実行しません。しかし、Reactはそのpackage.jsonで設定されています（実際に緩んでいる）。私はそれがあなたのために働いていない理由は、オプションとしてenvifyする環境を渡すことだと思います（Reactを実行していないenvifyのあなたの呼び出し）。 envifyドキュメントは、この仕組みがどのように説明されているかについては良くありません。あなたがすべきリアクトの生産ビルド取得するには：

NODE_ENV=production browserify -t envify assets/js/app.js -o assets/js/bundle.js 

を私はこのアプリのコードに期待して反応としてenvifyを機能させるべきだと考えています。

Answer 2

残念ながら、process.env.NODE_ENVの設定はBrowserifyには影響しないため、残念ながらJMMの答えは機能しません。結果のバンドルはまだそれでprocess.env.NODE_ENV参照ひいては

• Browserify生産版モジュールを反応しないrequire()なり、minifierはデッドコードを削除することはできません
• 、および
• アプリケーションがまだされますがありますデバッグモードで動作します。

これは、残念ながら、このアプローチは正しいアプローチは、例えば

• https://github.com/hughsk/envify/issues/15#issuecomment-62229101
• で見つけることができ

  ---

  :-(正解として提供される唯一の場所ではありませんhttps://reactjs.org/docs/optimizing-performance.html#browserify

envifyトランスフォームをグローバルに切り替える必要があります。

# note the "-g" instead of the usual "-t" 
$ browserify ... -g [ envify --NODE_ENV production ] .... 

またはgulpfile.js

browserify(...) 
    ... 
    .transform('envify', { 
     global: true, // also apply to node_modules 
     NODE_ENV: debug ? 'development' : 'production', 
    }) 
    ... 
    .bundle() 
    ... 
    .pipe(gulpif(!debug, babelMinify())) // my example uses gulp-babel-minify 
    ...