Envify CLI 不删除 process.env.NODE_ENV答案

【问题标题】：Envify CLI not removing process.env.NODE_ENVEnvify CLI 不删除 process.env.NODE_ENV
【发布时间】：2016-04-22 12:23:40
【问题描述】：

我正在尝试减小我的 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 文件夹中的所有我需要的模块中（例如 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，我仍然在 bundle.js 中有一些 process.env.NODE_ENV 的实例。

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

这解决了我的问题，但我仍然不确定为什么 react-router 不允许 browserify 和 envify 一起工作。

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

【问题讨论】：

标签： reactjs browserify react-router envify

【解决方案1】：

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

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

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

【讨论】：

感谢@JMM 的回答。我进行了编辑并添加了一些我认为是由 react-router 引起的额外问题，并且可能对其他人有所帮助。变通方法解决了我的问题。

【解决方案2】：

不幸的是，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
    ...

【讨论】：