浏览器&将NODE_ENV用于生产

时间:2017-07-13 04:06:04

标签: javascript reactjs gulp browserify

我想用react和其他人构建我的js代码并将其缩小为一个文件。

效果很好,但我得到了反应的开发版本

It looks like you're using a minified copy of the development build of React

现在我知道我需要添加NODE_ENV = production

但是我尝试了很多方式,而且构建保持不变......

我尝试了envify,你可以在下面看到,并像这样硬编码:

process.env.NODE_ENV = 'production';

但仍然不好。

当我尝试添加envify变换时:

.transform(envify({
  'NODE_ENV': 'production'
}))

我在构建中遇到此错误:

TypeError Path must be a string.

任何想法?

function bundleJs() {

const _browserify = browserify({
    entries: [config.entry],
    debug : false,
    cache: {},
    packageCache: {},
    fullPaths: true,
    extensions: ['.js']
  });

  _browserify.plugin(resolutions, ['*'])
    .transform('envify', {global: true, _: 'purge', NODE_ENV: 'production'})
    .transform(hbsfy)
    .transform(babelify, {
      only: /(app)|(frontend-app)/,
      presets: ['es2015-without-strict', 'react']
    })
    .on('update', () => {
      bundle();
      gutil.log('Rebundle...');
    })
    .on('log', gutil.log);

  function bundle() {
    return bundler.bundle()
      .on('error', handleError)
      .pipe(source('init.js'))
      .pipe(rename('bundle.js'))
      .pipe(buffer())
      .pipe(gulpif(env === 'production', uglify()))
      .pipe(gulpif(env !== 'production', sourcemaps.init({ loadMaps: true })))
      .pipe(gulpif(env !== 'production', sourcemaps.write('.')))
      .pipe(gulp.dest(config.dist))
      .pipe(browserSync.reload({stream:true}));
  }

  // run it once the first time buildJs is called
  return bundle();
}

1 个答案:

答案 0 :(得分:1)

好的,所以在我的生活中浪费了3个小时的代码。

我注意到反应的构建是使用凉亭而不是来自npm。

在composer.json里面,我们在"浏览器"下面有识别,即:

"react": "./bower_components/react/react.js",
"react-dom": "./bower_components/react/react-dom.js"

我认为这直接指向dev build,所以这就是问题。

我只是用npm安装,一切运行良好。