实现browserify的困难答案

【问题标题】：difficulties with implementing browserify实现browserify的困难
【发布时间】：2016-12-21 22:26:41
【问题描述】：

我有两个 .js 文件，在同一个文件夹中。

app.js：

import {foo} from 'custom';
foo();

custom.js

function foo(){
  $('.nav.navbar-nav > li').on('click', function(e) {
    $('.nav.navbar-nav > li').removeClass('active');
    $(this).addClass('active');
  });
}

我尝试将它们捆绑在 gulpfile.js 中，同时在同一任务中使用 babel。

gulp.task('app-scripts', function() {
  return gulp.src('src/js/app.js')
    .pipe(babel({
        presets: ["es2015"]
    }))
    .pipe(uglify())
    .pipe(gulp.dest('build/js'));
 });

有人可以帮我在这个任务中实现browserify吗？我已经阅读了文档，但是当我需要它时不知道如何应用它。

也试过了，但没用：

  const gulp           = require('gulp');
  const babelify       = require('babelify');
  const browserify     = require('browserify');
  const source         = require('vinyl-source-stream');
  const buffer         = require('vinyl-buffer');
  const sourcemaps     = require('gulp-sourcemaps');

  var config = {
    src:      './src/js/app.js', // тут исходник
    out:      './build/js/app.js', // тут выходной файл
    srcmaps:  '/build/maps' // sourcemap'ы сохраняться будут сюда же

  }

   gulp.task('app-scripts', function() {
     const bundler = browserify(config.src, {debug: true})
    .transform('babelify', {presets: ['es2015']})

return bundler.bundle()
    .pipe(source(config.out))
    .pipe(buffer())
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write(config.srcmaps, {addComment: false}))
    .pipe(gulp.dest('./build/js'));
  });

【问题讨论】：

标签： npm gulp ecmascript-6 browserify babeljs

【解决方案1】：

由于某种原因，上面列出的方法（来自文档）不起作用，但是这种方法效果很好，它也来自文档：

gulp.task('app-scripts', function() {
const bundler = browserify('./src/js/app.js', {debug: true})
    .transform(babelify.configure({presets: ["es2015"]}));

return bundler.bundle()
    .pipe(source('app.min.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('./', {addComment: false}))
    .pipe(gulp.dest('./build/js'));
});

【讨论】：