web-dev-qa-db-fra.com

Gulp + browserify + 6to5 + cartes sources

J'essaie d'écrire une tâche gulp me permettant d'utiliser des modules dans JS (CommonJS est très bien), en utilisant browserify + 6to5. Je veux également que le mappage source fonctionne.

Donc: 1. J'écris des modules en utilisant la syntaxe ES6. 2. 6to5 transpile ces modules dans la syntaxe CommonJS (ou autre). 3. Browserify regroupe les modules. 4. Les cartes sources renvoient aux fichiers ES6 d'origine.

Comment écrire une telle tâche?

Edit: Voici ce que j'ai jusqu'à présent:

tâche de gorgée

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

Le code semble fonctionner, mais il n'est pas minifié et la carte source est en ligne (ce qui ne fonctionne pas vraiment pour la production).

gulpbrowserifysource-mapsbabeljs
32
Stefan Bruvik

Utilisez-le comme point de départ:

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

Je ne comprenais pas pourquoi nous devions utiliser certaines choses pour que cela fonctionne, alors j'ajoute ma propre réponse ici. Pour ceux qui recherchent une solution avec babelify, j'en ai ajouté une ci-dessous. J'ai aussi pensé qu'il serait bon de parler de ce que fait chaque ligne.

Pour ceux qui veulent utiliser ES6 dans leur Gulpfile, vous pouvez regarder ici mais Gulp le prend en charge si vous renommez votre fichier en Gulpfile.babel.js à partir de Gulp 3.9

Une chose importante à noter est que vous devez utiliser vinyl-source-stream avec Browserify pour convertir la sortie en quelque chose que Gulp peut comprendre . À partir de là, beaucoup de les plugins gulp nécessitent des tampons en vinyle c'est pourquoi nous tamponnons le flux source.

Pour ceux qui ne sont pas familiers avec les sourcemaps, ils sont essentiellement un moyen pour vous de mapper votre fichier groupé minifed au fichier source principal. Chrome et Firefox le prennent en charge, donc lorsque vous déboguez, vous pouvez regarder votre code ES6 et où il a échoué.

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

Autres lectures utiles:

Gulp browserify la manière gulp-y

3
aug