关于 browserify 的 gulp 配方的问题答案

【问题标题】：questions about gulp recipe for browserify关于 browserify 的 gulp 配方的问题
【发布时间】：2016-09-18 15:56:18
【问题描述】：

github 上的 gulp recipes 明确表示使用 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())

该示例具体是关于使用 glob 匹配多个文件。他们为什么要指定一个 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()，我需要使用presets: es2016, es2015 使用babelify 进行转换。事实证明，你不能只做显而易见的事情：transform: [babelify, {presets: ['es2015','es2016']}]，因为这行不通。

同样，你不能只依赖 .babelrc 文件和一个普通的 transform: [babelify]，因为这不起作用（我看到导入正在工作，但像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

【问题讨论】：

标签： browserify babeljs

【解决方案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
})

【讨论】：