Envify CLI 未删除 process.env.NODE_ENV

Question

我正在尝试减小我的 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" 或我的其他组件中的所有实例都已正确替换为 "production"。

...但是在 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，然后运行ning 在捆绑包上使用：NODE_ENV=production envify assets/js/bundle.js > assets/js/bundle2.js

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

希望这对遇到类似问题的其他人有所帮助！！

Answer 1

Browserify 不会运行转换 node_modules 中的内容。但是，React 在其 package.json 中配置了 envify（现在实际上是 loose-envify）。我认为它对您不起作用的原因是将环境作为一个选项传递给 envify（同样，您对 envify 的调用在 React 上没有运行ning）。 envify 文档没有很好地解释这是如何工作的。要获得 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 生产版本模块，
缩小器将无法删除死代码，并且
应用程序仍将运行处于调试模式。

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

正确的方法可以在例如

中找到

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

Envify CLI not removing process.env.NODE_ENV

browserify

reactjs

react-router

envify