使用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. 与gulp-uglify插件和gulp-sourcemaps插件捆绑后的Uglify。不幸的是，这不太理想，因为它不会删除死require语句。

2. 创建单独的开发和分发版本。然后，您可以为您的开发构建生成源映射，而无需进行丑化。如果没有源映射，您的发行版本可能会变得丑陋。