Ich versuche, eine Schluckaufgabe zu schreiben, mit der ich Module in JS (CommonJS ist in Ordnung) mit browserify + 6to5 verwenden kann. Ich möchte auch, dass die Quellenzuordnung funktioniert.

So: 1. Ich schreibe Module mit ES6-Syntax. 2. 6to5 transpiliert diese Module in CommonJS (oder eine andere) Syntax. 3. Browserify bündelt die Module. 4. Quellkarten verweisen auf die ursprünglichen ES6-Dateien.

Wie schreibe ich eine solche Aufgabe?

Edit: Folgendes habe ich bisher:

gulp task

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));
});

modules / A.js

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

    let x = 10;

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

export {
    foo
};

modules / B.js

import {
    foo
}
from './A';

function bar() {
    foo();
}

export {
    bar
};

modules / main.js

import {
    bar
}
from './B';

bar();

Der Code scheint zu funktionieren, ist aber nicht verkleinert und die Quellkarte ist inline (was für die Produktion nicht wirklich funktioniert).