Gulp + browserify + 6to5 + source maps

Question

我正在尝试编写一个 gulp 任务，允许我在 JS 中使用模块(CommonJS 很好)，使用 browserify + 6to5。我也希望源映射能够工作。

所以:
1. 我使用 ES6 语法编写模块。
2. 6to5 将这些模块转换为 CommonJS(或其他)语法。
3. Browserify 捆绑模块。
4. Source maps 指回原始的 ES6 文件。

如何编写这样的任务？

编辑:这是我到目前为止所拥有的:

gulp 任务

gulp.task('browserify', function() {
    var source = require('vinyl-source-stream');
    var browserify = require('browserify');
    var to5ify = require('6to5ify');

    browserify({
        debug: true
    })
    .transform(to5ify)
    .require('./app/webroot/js/modules/main.js', {
        entry: true
    })
    .bundle()
    .on('error', function(err) {
        console.log('Error: ' + err.message);
    })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(destJs));
});

模块/A.js

function foo() {
    console.log('Hello World');

    let x = 10;

    console.log('x is', x);
}

export {
    foo
};

模块/B.js

import {
    foo
}
from './A';

function bar() {
    foo();
}

export {
    bar
};

模块/main.js

import {
    bar
}
from './B';

bar();

代码似乎可以工作，但它没有被缩小，并且源映射是内联的(这实际上不适用于生产)。

Answer 1

以此为起点:

var gulp = require('gulp');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var to5ify = require('6to5ify');
var uglify = require('gulp-uglify');

gulp.task('default', function() {
  browserify('./src/index.js', { debug: true })
    .transform(to5ify)
    .bundle()
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
    .pipe(uglify())
    .pipe(sourcemaps.write('./')) // writes .map file
    .pipe(gulp.dest('./build'));
});