使用gulp，Browserify，reactify，UglifyJS的源地圖

Question

我正在嘗試獲取與Chrome一起使用的JavaScript文件的源地圖。 當前gulp腳本的問題在於源映射（Browserify創建）導致文件的縮小版本。

例如，假設app.jsx是Browserify的入口文件，它require('a')和require('b')調用。 app.jsx獲得瀏覽器化，重新設置和uglifyied並按預期寫入app.js。 但是，模塊a和模塊b中的所有源映射引用也會縮小：

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

有關如何使其工作的任何想法？

Answer 1

看起來這是uglifyify的問題（ https://github.com/hughsk/uglifyify/issues/16 ）。 它似乎只是不知道如何生成源地圖。

有一些替代方案：

1. 與捆綁后丑化 一飲而盡，丑化插件和一飲而盡，sourcemaps插件。 不幸的是，這不太理想，因為它不會刪除死的require語句。

2. 創建單獨的開發和分發版本 。 然后，您可以在不進行uglification的情況下為開發構建生成源映射。 您的分發版本可以在沒有源映射的情況下進行驗證。