javascript - 在生产构建期间从 bundle 中删除 JavaScript 代码

Question

我注意到 ReactJS 有一些仅在开发模式下出现的调试消息。

当我在 bundle 之前在 gulpfile.js 中设置 process.env.NODE_ENV = 'product'; 时，调试消息消失。

如何编写这样的代码，该代码仅出现在开发(调试)构建中，但不 bundle 到生产构建中？

类似于:

function sayHello(message){
  #IF DEBUG
     if (!message) console.log("message cannot be null");
  #ENDIF

  alert(message);
}

<小时/>

编辑: 当我尝试使用 if (process.env.NODE_ENV !== 'product') 时，gulp-uglify 正确地从生产构建中的包中删除了代码。但是，在运行时(在浏览器中)，process.env.NODE_ENV 未定义，并且从未满足条件。

它怎么可能在 React 中工作？

var browserify = require("browserify");
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

process.env.NODE_ENV = 'production';

var bundler = browserify({ debug: false })
   .require('react')
   .require('react-dom')

bundler.bundle()
    .pipe(source("reactbundle.js"))
    .pipe(buffer());
    .pipe(uglify())
    .pipe(gulp.dest(paths.distDir + 'scripts'));

Answer 1

我没有 typescript 版本，但你尝试过gulp-remove-code ？您可以在 JavaScript 周围添加一些注释，以在运行生产构建时删除所需的任何代码。这是来自上面链接的页面:

var removeCode = require('gulp-remove-code');

gulp.src('./src/file.js')
  .pipe(removeCode({ production: true }))
  .pipe(gulp.dest('./dist'))


//removeIf(production) 
value = JSON.stringify({key: 'value'}, null, 2);
//endRemoveIf(production)