不删除process.env.NODE_ENV

Question

我试图缩小我的反应bundle.js的大小。

为了使用process.env.NODE_ENV并删除所有额外的开发代码，我尝试使用Envify和Browserify来用字符串"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“或其他组件中的所有实例都被正确地替换为"production”。

...But在我需要的node_modules文件夹中的所有模块(如react等)中，这些实例都不会被替换。

任何帮助都非常感谢！太棒了！

*编辑*

JMM的解决方案成功地回答了最初的问题，但我仍然有一个问题，因为我正在使用React-Router (我认为)。

我创建了一个简单的例子来显示情况。

这是我的app.js文件：

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

如果我运行NODE_ENV=production browserify -t envify assets/js/app.js -o assets/js/bundle.js，那么process.env.NODE_ENV的一些实例仍然存在于bundle.js中。

我找到了一个解决方案，只需使用：bundle.js：browserify assets/js/app.js -o assets/js/bundle.js创建browserify assets/js/app.js -o assets/js/bundle.js，然后在包中使用：NODE_ENV=production envify assets/js/bundle.js > assets/js/bundle2.js运行envify。

这解决了我的问题，但我仍然不确定为什么react-router不允许浏览器化和环境协同工作。

我希望这能帮助其他有类似问题的人！！

Answer 1

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

我相信这应该会导致你的应用程序代码的功能，并作出反应。

Answer 2

不幸的是，JMM的答案不起作用，因为设置process.env.NODE_ENV对Browserify没有影响。生成的包中仍然有process.env.NODE_ENV引用，因此

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

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

正确的方法可以在以下几个方面找到。

• https://github.com/hughsk/envify/issues/15#issuecomment-62229101
• https://reactjs.org/docs/optimizing-performance.html#browserify

您需要切换环境转换为全局转换。

# 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
    ...