关于 gulp browserify 配方的问题

Question

github 上的 gulp 食谱特别提到使用 stackexchange 来解决问题而不是错误报告，这就是我来这里的原因。

我正在看 Browserify + Globs 食谱，我有一些问题。

问题：什么app.js？

bundledStream
  // turns the output bundle stream into a stream containing
  // the normal attributes gulp plugins expect.
  .pipe(source('app.js'))
  // the rest of the gulp task, as you would normally write it.
  // here we're copying from the Browserify + Uglify2 recipe.
  .pipe(buffer())

这个例子具体是关于使用 globs 来匹配多个文件。为什么他们指定一个 app.js 文件？我真的需要在某个地方放一些 app.js 吗？如果需要，里面应该放什么？

问题：是否有替代形式？

globby(['./entries/*.js']).then(function(entries) {
  // create the Browserify instance.
  var b = browserify({
    entries: entries,
    debug: true,
    transform: [reactify]
  });

我看这个食谱的全部原因是因为我正在使用 gulp-browserify，但它没有维护并且没有 browserify(...).transform()，我需要用 babelify 和 presets: es2016, es2015。事实证明，您不能只做显而易见的事情：transform: [babelify, {presets: ['es2015','es2016']}]，因为这是行不通的。

同样，你不能只依赖 .babelrc 文件和一个普通的 transform: [babelify]，因为那是行不通的（我看到 imports 是工作，但像constructor({val_a=1, val_b})这样的解构参数不工作。

总的来说，我想转换这个工作任务：

return gulp.src(['dev/scripts/**/*.js', '!dev/scripts/vendor/**/*.js'])
    .pipe(plumber({
        handleError: function (err) {
            console.log(err);
            this.emit('end');
        }
    }))
    .pipe(browserify())
    .pipe(gulp.dest('build/scripts'))
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(uglify())
    .pipe(gulp.dest('build/scripts'))
    .pipe(reload({ stream: true }))

使用常规 browserify 和使用 .transform("babelify", {presets: ["es2016"]})

的 babelify

Answer 1

原来你需要的表格是babelify.configure({})

我的任务以这种形式工作：

gulp.task('scripts', function () {
  let scripts = ['dev/scripts/**/*.js', '!dev/scripts/vendor/**/*.js']
  let bundledStream = through()

  bundledStream
    .pipe(source('main.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify())
    .pipe(plumber({
      handleError: function (err) {
        console.log(err)
        this.emit('end')
      }
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./build/scripts'))
    .pipe(reload({ stream: true }))

  globby(scripts).then(function(entries) {
    let b = browserify({
      entries: entries,
      debug: true,
      transform: [babelify.configure({
        presets: ["es2016", "es2015"]
      })]
    })

    b.bundle().pipe(bundledStream)
  }).catch(function(err) {
    bundledStream.emit('error', err)
  })

  return bundledStream
})

关于 gulp browserify 配方的问题

questions about gulp recipe for browserify

browserify

babeljs

问题：什么app.js？

问题：是否有替代形式？