如何使用新的Browserify API？ [英] How to use the new Browserify API?

问题描述

我目前正在开发一个ReactJS项目，所以我决定使用Gulp来设置工作流，以管理uglification，缩小，JSX转换等等。

问题在于Browserify API不断变化（文档没有经常更新），我们不能再使用bundle（）中的选项。

日志错误消息：将所有选项参数移动到Browserify（）构造函数
但并非所有我正在使用的选项都可用，这里是我现在的代码：

  var gulp = require（'gulp'）; 
 var gutil = require（'gulp-util'）; 
 var streamify = require（'gulp-streamify'）; 
 var source = require（'vinyl-source-stream'）; 
 var del = require（'del'）; 
 
 prod = gutil.env.prod; 
 
 gulp.task（'cleanjs'，function（cb）{
 del（['build / js']，cb）; 
}）; 
 
 gulp.task（'cleancss'，function（cb）{
 del（['build / css']，cb）; 
}）; 
 
 gulp.task（'sass'，['cleancss']，function（）{
 var sass = require（'gulp-sass'）; 
 var concat = require （'gulp-concat'）; 
 
 gulp.src（['./ src / ** /。{css，scss}']）
 .pipe（sass（））
 .pipe（concat（'livemap.min.css'））
 .pipe（gulp.dest（'./ build / css'））; 
}）; 
 
 gulp.task（'watch'，function（）{
 var watchify = require（'watchify'）; 
 var reactify = require（'reactify'）; 
 var browserify = require（'browserify'）; 
 var uglify = require（'gulp-uglify'）; 
 var bundler = watchify（browserify（'./ src / main.js'，{ 
 cache：{}，
 packageCache：{}，
 fullPaths：true，
 transform：['reactify']，
 debug：true，
 }）; 
 
函数rebundle（）{
 var t = Date.now（）; 
 gutil.log（'Starting Watchify rebundle'）; 
 return bundler.bundle（）
 .pipe（source（'bundle.js'））
 .pipe（prod？streamify（uglify（））：gutil.noop（））
 .pipe gulp.dest（'./ build / js'））
 .on（'end'，function（）{
 gutil.log（'Finished bundling after：'，gutil.colors.magenta（Date .now（） -  t +'ms'））; 
}）; 
} 
 
 bund ler.on（'update'，rebundle）; 
 
 gulp.watch（'./ src / ** / *。{css，scss'，['sass']）; 
 
 return rebundle（）; 
}）; 
 
 gulp.task（'default'，['watch']）; 
  

任何帮助都会非常受欢迎！

解决方案

以下是我的工作方式： https://raw.githubusercontent.com/furqanZafar/reactjs-image-upload/master/gulpfile.js

  var options = watchify.args; 
 options.debug = true; 
 var bundler = browserify（options）; 
 bundler.add（./ public / scripts / app.js）; 
 bundler.transform（reactify）; 
 
 var watcher = watchify（bundler）; 
。 
。 
。 
  

I am currently working on a ReactJS project, so I decided to setup a workflow using Gulp to manage the uglification, minification, JSX transformation and so on.

The problem is that the Browserify API is constantly changing (the documentation is not being updated quite often) we can no longer use options inside bundle()

As it is stated by the log error message : "Move all option arguments to the Browserify() constructor" But not all the options I am using are available, here is my code for now :

var gulp = require('gulp');
var gutil = require('gulp-util');
var streamify = require('gulp-streamify');
var source = require('vinyl-source-stream');
var del = require('del');

prod = gutil.env.prod;

gulp.task('cleanjs', function(cb) {
  del(['build/js'], cb);
});

gulp.task('cleancss', function(cb) {
  del(['build/css'], cb);
});

gulp.task('sass', ['cleancss'], function() {
    var sass = require('gulp-sass');
    var concat = require('gulp-concat');

    gulp.src(['./src/**/.{css, scss}'])
        .pipe(sass())
        .pipe(concat('livemap.min.css'))
        .pipe(gulp.dest('./build/css'));
});

gulp.task('watch', function() {
    var watchify = require('watchify');
    var reactify = require('reactify');
    var browserify = require('browserify');
    var uglify = require('gulp-uglify');
    var bundler = watchify(browserify('./src/main.js', {
        cache: {},
        packageCache: {},
        fullPaths: true,
        transform: ['reactify'],
        debug: true,
    }));

     function rebundle() {
        var t = Date.now();
        gutil.log('Starting Watchify rebundle');
        return bundler.bundle()
        .pipe(source('bundle.js'))
        .pipe(prod ? streamify(uglify()) : gutil.noop())
        .pipe(gulp.dest('./build/js'))
        .on('end', function () {
            gutil.log('Finished bundling after:', gutil.colors.magenta(Date.now() - t + ' ms'));
        });
    }

    bundler.on('update', rebundle);

    gulp.watch('./src/**/*.{css, scss', ['sass']);

    return rebundle();
});

gulp.task('default', ['watch']);

Any help would be very welcome !

解决方案

Here's how i do it: https://raw.githubusercontent.com/furqanZafar/reactjs-image-upload/master/gulpfile.js

var options = watchify.args;
options.debug = true;    
var bundler = browserify(options);
bundler.add("./public/scripts/app.js");
bundler.transform("reactify");

var watcher = watchify(bundler);
.
.
.

这篇关于如何使用新的Browserify API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！