使用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

回答

相關問題