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

我正在尝试为使用Chrome的JavaScript文件获取源地图。当前gulp脚本的问题在于源映射（即Browserify创建的）会导致文件的缩小版本。使用gulp，Browserify，reactify的源地图，UglifyJS

例如，假设app.jsx是用于Browserify的条目文件，并且其中包含require('a')和require('b')调用。 app.jsx会按预期进行浏览，重新定义和uglify并写入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')); 
});

如何得到这个工作任何想法？

来源

2014-12-08 Adrian Adkison

看起来这是uglifyify（https://github.com/hughsk/uglifyify/issues/16）的问题。它似乎只是不知道如何生成源地图。

有一些替代方案：

丑化后与gulp-uglify插件和插件gulp-sourcemaps捆绑。不幸的是，这是不太理想的，因为它不会删除死亡require陈述。
创建单独的开发和分发版本。然后，您可以为您的开发版本生成源代码地图，而无需使用uglification。你的发布版本可能会被忽略，没有源地图。

来源

2014-12-08 22:07:22

1.的问题是browserify将sourcemap内联到文件中，然后uglify去掉评论。我选择了2，我不喜欢它，因为你不是经常测试它在生产中运行的代码，但是这种类型的错误很少发生在我的经验中。 – 2014-12-10 18:32:46

您需要告诉大量的源代码来阅读现有的地图。 'sourcemaps.init（{loadMaps：true}）' – 2014-12-10 18:39:39

啊，我认为这不适用于内联源地图，但在阅读文档时，你肯定是正确的。但是，我仍然希望使用更优化的缩小策略进行部署，这意味着无论如何我都会有不同的开发流程。可能要坚持单独的构建战略。尽管非常感谢你的建议。 – 2014-12-10 23:02:30

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

回答

相关问题