使用 gulp、Browserify、reactify、UglifyJS 的源映射答案

【问题标题】：Source maps using gulp, Browserify, reactify, UglifyJS使用 gulp、Browserify、reactify、UglifyJS 的源映射
【发布时间】：2014-12-08 06:08:26
【问题描述】：

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

例如，假设 app.jsx 是 Browserify 的入口文件，其中包含 require('a') 和 require('b') 调用。 app.jsx 被浏览器化、反应化和丑化，并按预期写入 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'));
});

关于如何让它发挥作用的任何想法？

【问题讨论】：

标签： gulp browserify uglifyjs reactify

【解决方案1】：

看起来这是 uglifyify (https://github.com/hughsk/uglifyify/issues/16) 的问题。它似乎只是不知道如何生成源映射。

有一些选择：

使用gulp-uglify 插件和gulp-sourcemaps 插件捆绑之后。不幸的是，这不是最理想的，因为它不会删除死的require 语句。
创建单独的开发和分发版本。然后，您可以为您的开发构建生成源映射，而无需 uglification。您的分发版本可能会在没有源映射的情况下被丑化。

【讨论】：

1.的问题是browserify将sourcemap内联到文件中，然后uglify去掉注释。我选择了 2，我不喜欢它，因为您不会像在生产中运行的那样不断测试代码，但在我的经验中，这类错误很少发生。
你需要告诉 gulp sourcemaps 读取现有的地图。 sourcemaps.init({loadMaps: true})
啊，我认为这不适用于内联源映射，但在阅读文档后，您肯定是正确的。但是，我仍然希望使用更优化的最小化策略进行部署，这意味着无论如何我都会有不同的开发流程。可能会坚持使用单独的构建策略。非常感谢您的建议。