0

I am trying to reduce the size of my React bundle.js.

I am attempting to use Envify with Browserify to replace process.env.NODE_ENV with the string "production", in order to use uglifyjs and remove all the extra development code.

Here is my command: browserify -t [envify --NODE_ENV production] assets/js/app.js -o assets/js/bundle.js

So my bundle.js is successfully created, but it still has some of the instances of process.env.NODE_ENV.

All the instances that are in my "app.js" or my other components are correctly replaced with "production".

...But in all of my required modules from the node_modules folder (like react etc), the instances are not replaced.

Any help greatly appreciated! THX!

******************* Edit **********************

JMM's solution successfully answered the original question, but I still had an issue because I am using React-Router (I think).

I created a simple example that shows the situation.

Here is my app.js file:

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')
    );

If I run NODE_ENV=production browserify -t envify assets/js/app.js -o assets/js/bundle.js, I still have some instances of process.env.NODE_ENV in the bundle.js.

I found a work-around by simply creating the bundle.js with: browserify assets/js/app.js -o assets/js/bundle.js, and then running envify on the bundle with: NODE_ENV=production envify assets/js/bundle.js > assets/js/bundle2.js

This solves my problem, but I am still unsure why react-router doesn't allow browserify and envify to work together.

I hope this helps others with a similar problem!!

4

2 回答 2

0

Browserify 不会对node_modules. 然而，React 在它的package.json. 我认为它对您不起作用的原因是将环境作为选项传递给 envify（同样，您对 envify 的调用没有在 React 上运行）。envify 文档并不能很好地解释它是如何工作的。要获得 React 的生产版本，你应该这样做：

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

我相信这应该会导致 envify 在您的应用程序代码和 React 上按预期运行。

于 2016-04-23T03:06:31.090 回答
0

不幸的是，JMM 的回答不起作用，因为设置process.env.NODE_ENV在 Browserify 中无效。生成的包中仍然有process.env.NODE_ENV引用，因此

  • Browserify 不会require()使用 React 生产版本模块，
  • 缩小器将无法删除死代码，并且
  • 应用程序仍将在调试模式下运行。

不幸的是，这不是提供这种方法作为正确答案的唯一地方:-(

正确的方法可以在例如

您需要将 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
    ...
于 2017-12-05T14:35:01.927 回答