Mappe sorgente utilizzando gulp, Browserify, reactify, UglifyJS

Question

Sto cercando di ottenere mappe sorgente per i miei file JavaScript che funzionano con Chrome. Il problema con lo script gulp corrente è che le mappe sorgente (create da Browserify) portano a versioni minificate dei file.

Ad esempio, supponiamo che app.jsx sia un file di immissione per Browserify e che contenga le chiamate require('a') e require('b'). app.jsx viene browserificato, riattivato e uglifyied e scritto in app.js come previsto. Tuttavia, tutte le origini mappe riferimenti all'interno del modulo e il modulo ab sono anche minified:

var gulp = require('gulp'), 
    browserify = require('browserify'), 
    watchify = require('watchify'), 
    source = require('vinyl-source-stream'), 
    buffer = require('vinyl-buffer'), 
    bundler; 

bundler = browserify({ 
    entries: '/app.jsx', 
    cache: {}, 
    packageCache: {}, 
    fullPaths: true 
}); 

bundler 
    .transform('reactify'); 
    .transform({ 
     global: true 
    }, 'uglifyify'); 

bundler = watchify(bundler); 
bundler.on('update', function() { 
    return bundler 
     .bundle() 
     .pipe(source('app.js')) 
     .pipe(buffer()) 
     .pipe(gulp.dest('/js')); 
}); 

Tutte le idee su come ottenere questo lavoro?

Answer 1

Sembra che si tratti di un problema con uglifyify (https://github.com/hughsk/uglifyify/issues/16). Sembra proprio che non sappia come generare mappe di origine.

ci sono alcune alternative:

1. Uglify dopo bundling con il plugin gulp-uglify e il plugin gulp-sourcemaps. Purtroppo questo è leggermente meno ottimale dal momento che non rimuoverà le dichiarazioni dead require.

2. Creazione di build di sviluppo e distribuzione separati. È quindi possibile generare mappe di origine per la build di sviluppo senza alcuna riduzione. La tua configurazione di distribuzione potrebbe essere migliorata senza mappe di origine.