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）的问题。它似乎只是不知道如何生成源地图。

有一些替代方案：

使用gulp-uglify插件和gulp-sourcemaps插件捆绑后使用进行身份验证。不幸的是，这种情况稍微不那么理想，因为它不会删除死的require语句。

创建单独的开发和分发构建。然后，您可以在不进行uglification的情况下为开发构建生成源映射。您的分发版本可以在没有源地图的情况下进行验证。

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

1 个答案: