gulp - 使用 gulp、Browserify、reactify、UglifyJS 的源映射

Question

我正在尝试获取与 Chrome 一起使用的 JavaScript 文件的源映射。当前 gulp 脚本的问题在于源映射(Browserify 创建的)导致文件的缩小版本。

例如，假设 app.jsx 是 Browserify 的入口文件，它有 require('a')和 require('b')调用它。 app.jsx 被浏览器化、 react 化和丑化，并按预期写入 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。您的发行版本可能会在没有源映射的情况下被丑化。