gulp - source - use node js modules in browser

Gulp+browserify+6to5+mapas de origen

Question

Intento escribir una tarea de trago que me permita usar módulos en JS (CommonJS está bien), usando browserify + 6to5. También quiero que el mapeo de fuentes funcione.

Entonces: 1. Escribo módulos usando la sintaxis ES6. 2. 6to5 transpila estos módulos a la sintaxis CommonJS (u otra). 3. Browserify agrupa los módulos. 4. Los mapas de origen hacen referencia a los archivos originales de ES6.

¿Cómo escribir tal tarea?

Editar: Esto es lo que tengo hasta ahora:

trago

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

El código parece estar funcionando, pero no está minimizado y el mapa fuente está en línea (lo que realmente no funciona para la producción).

Answer 1

No entendí por qué tuvimos que usar ciertas cosas para que esto funcionara, así que estoy agregando mi propia respuesta aquí. Para aquellos que buscan una solución con babelify , agregué una a continuación. También pensé que sería bueno hablar sobre lo que hace cada línea.

Para aquellos que quieran usar ES6 en su Gulpfile, pueden verlo here pero Gulp lo admite si Gulpfile.babel.js nombre de su archivo a Gulpfile.babel.js partir de Gulp 3.9

Una cosa importante a tener en cuenta es que necesitas usar vinyl-source-stream con Browserify para convertir la salida en algo que Gulp pueda entender . Desde allí, muchos plugins de gulp requieren buffer de vinilo, por lo que almacenamos el buffer de la fuente.

Para aquellos que no están familiarizados con sourcemaps, son esencialmente una forma de asignar su archivo empaquetado minifed al archivo fuente principal. Chrome y Firefox admiten para que cuando depure pueda ver su código ES6 y dónde falló.

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

Otras lecturas útiles:

Tragar navegador de la manera trilla

Answer 2

Use esto como su punto de inicio:

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