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

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

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

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

Изменить: вот что у меня есть до сих пор:

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

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

Кажется, что код работает, но он не минимизирован, а исходная карта встроена (что на самом деле не работает для производства).


babeljs gulp source-maps browserify
person Stefan Bruvik    schedule 22.01.2015    source источник

Ответы (2)


arrow_upward
46
arrow_downward

Используйте это как отправную точку:

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'));
});
person chico    schedule 22.01.2015
comment
Это работает очень хорошо, спасибо. Я заметил, что невозможно установить точки останова в файлах с исходным кодом в инструментах разработчика Chrome - это просто невозможно на данном этапе? - person lamplightdev; 29.01.2015
comment
Забудьте об этом — я также использовал uglify, который запутывал имена переменных. - person lamplightdev; 29.01.2015
comment
@lamplightdev Да, я только что добавил настройки, чтобы перестать коверкать имена .pipe(uglify({ mangle: false })), и это сработало отлично. Я также добавил полифиллы 6to5 непосредственно перед преобразованием с помощью .add(require.resolve('6to5/polyfill')) для лучшей совместимости с разными браузерами :) hth! - person Andrew Odri; 30.01.2015
comment
Есть ли способ сделать то же самое с хрюканьем? - person moudrick; 13.02.2015
comment
@lamplightdev вы также можете условно отключить процесс uglify, используя gulpif. Например, вы можете запустить его только для производственной конфигурации, например. .pipe(gulpif(config.isProduction, uglify())) - person ctrlplusb; 21.04.2015
comment
для меня я получаю исходный файл, но он указывает только на ./src/index.js, это только ["sources"] (виден в самом начале файла), ни один из модулей, включенных оттуда (посредством require( )) - person Frank Nocke; 23.02.2016

arrow_upward
3
arrow_downward

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

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

Следует отметить одну важную вещь: вам нужно использовать vinyl-source-stream с помощью Browserify, чтобы преобразовать вывод во что-то понятное Gulp. Оттуда требуется много плагинов gulp. виниловые буферы, поэтому мы буферизуем исходный поток.

Для тех, кто не знаком с исходными картами, они, по сути, являются способом сопоставления вашего связанного мини-файла с основным исходным файлом. 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 использует браузер gulp-y

person aug    schedule 12.01.2016
comment
Я пытаюсь следовать вашему предложению, но безуспешно. Мой ES6 всегда преобразуется в ES5, чего я не хочу. Мне нужно то же, что вы предложили, отладка в ES6. Можете ли вы помочь мне с этим? - person Miloš Đošović; 02.12.2016