Question

我正在尝试减小我的React bundle.js的大小。

我正在尝试使用Envify和Browserify将process.env.NODE_ENV替换为字符串＆＃34; production＆＃34;，以便使用uglifyjs并删除所有额外的开发代码。

这是我的命令：browserify -t [envify --NODE_ENV production] assets/js/app.js -o assets/js/bundle.js

所以我的bundle.js已成功创建，但它仍然有一些process.env.NODE_ENV的实例。

我的＆＃34; app.js＆＃34;中的所有实例或者我的其他组件正确地替换为＆＃34; production＆＃34;。

...但是在node_modules文件夹中的所有必需模块中（如反应等），实例不会被替换。

任何帮助非常感谢！谢谢！

*******************编辑**********************

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，我在bundle.js中仍然有一些process.env.NODE_ENV的实例。

我通过简单地使用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不允许浏览器化和envify一起工作。

我希望这可以帮助其他类似问题的人!!

Answer 1

Browserify不会对node_modules中的内容进行转换。但是，React已在其package.json中配置了envify（现在实际上是松散envify）。我认为它不适合你的原因是将环境作为一个选项传递给envify（同样，你的envify调用没有在React上运行）。 envify docs不善于解释它是如何工作的。要获得React的生产版本，你应该这样做：

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

我认为这会导致envify在您的应用代码和React上按预期运行。

Answer 2

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

Browserify不会require() React生产版本模块，
minifier将无法移除死代码，
应用程序仍将以调试模式运行。

遗憾的是，这不是唯一提供此方法作为正确答案的地方： - （

正确的方法可以在例如

中找到

您需要将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
    ...

Envify CLI不删除process.env.NODE_ENV

2 个答案: