Gulp + Browsify + 6to5 + исходные карты

Question

Я пытаюсь написать задачу gulp, позволяющую мне использовать модули в JS (CommonJS в порядке) с использованием браузера + 6to5. Я также хочу, чтобы исходное сопоставление работало.

Итак: 1. Я пишу модули с использованием синтаксиса ES6. 2. 6to5 транслирует эти модули в синтаксис CommonJS (или другой). 3. Browserify объединяет модули. 4. Исходные карты ссылаются на исходные файлы ES6.

Как написать такую ​​задачу?

Edit: Вот то, что я до сих пор:

глотком задачи

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

Answer 2

Я не понимаю, почему мы должны были использовать некоторые вещи для того, чтобы получить эту работу так, я добавляю свой ответ здесь. Для тех, кто ищет решение с babelify, я добавил один ниже. Я также подумал, что было бы хорошо говорить о том, что делает каждая строка.

Для тех, кто хочет использовать ES6 в их Gulpfile, вы можете посмотреть here но Глоток поддерживает его, если переименовать файл в Gulpfile.babel.js от Глоток 3.9

Одна большая вещь, чтобы отметить, что вам нужно использовать vinyl-source-stream with Browserify in order to convert the output into something Gulp can understand. Оттуда много gulp plugins require vinyl buffers, поэтому мы буферизируем поток источника.

Для тех, кто не знаком с исходными картами, это, по сути, способ сопоставления вашего миниатюрного связанного файла с основным исходным файлом. Chrome и Firefox поддерживают его, поэтому при отладке вы можете посмотреть на свой код ES6 и там, где он не удалось.

import gulp   from 'gulp'; 
import uglify  from 'gulp-uglify'; 
import sourcemaps from 'gulp-sourcemaps'; 
import source  from 'vinyl-source-stream'; 
import buffer  from 'vinyl-buffer'; 
import browserify from 'browserify'; 
import babel   from 'babelify'; 

gulp.task('scripts',() => { 
    let bundler = browserify({ 
    entries: ['./js/main.es6.js'], // main js file and files you wish to bundle 
    debug: true, 
    extensions: [' ', 'js', 'jsx'] 
    }).transform(babel.configure({ 
    presets: ["es2015"] //sets the preset to transpile to es2015 (you can also just define a .babelrc instead) 
    })); 

    // bundler is simply browserify with all presets set 
    bundler.bundle() 
    .on('error', function(err) { console.error(err); this.emit('end'); }) 
    .pipe(source('main.es6.js')) // main source file 
    .pipe(buffer()) 
    .pipe(sourcemaps.init({ loadMaps: true })) // create sourcemap before running edit commands so we know which file to reference 
     .pipe(uglify()) //minify file 
     .pipe(rename("main-min.js")) // rename file 
    .pipe(sourcemaps.write('./', {sourceRoot: './js'})) // sourcemap gets written and references wherever sourceRoot is specified to be 
    .pipe(gulp.dest('./build/js')); 
}); 

Другие полезные показания:

Gulp browserify the gulp-y way