在browserify期间，uglifying下划线打破了源代码映射

相关，但没有答案。

在我的NPM项目中，我public了以下文件夹： 

 sourcemaps $ tree public/ public/ ├── index.html ├── js  ├── bar.js ├── foo.js  ├── main.js

在bar ： 

 'use strict'; var go = module.exports = function () { return 'hey, I am bar'; };

在foo ： 

 'use strict'; var bar = require('./bar'); var go = module.exports = function () { console.log(bar()); };

main ： 

 'use strict'; var foo = require('./foo'); foo();

我有一个节点脚本uglifies和创build源地图： 

 var bundle_map = 'public/js/bundle-map.json' , stream = '' , browserify = require('browserify') , exorcist = require('exorcist') , uglifyjs = require('uglify-js') , fs = require('fs'); browserify({entries: 'public/js/main.js', debug: true}) .bundle() .pipe(exorcist(bundle_map)) .on('data', function(chunk) { stream += chunk; }) .on('end', function() { var minified = uglifyjs.minify(stream, { fromString: true, inSourceMap: bundle_map, outSourceMap: 'bundle-min.map' }); fs.writeFile('public/js/bundle-min.js', minified.code); fs.writeFile('public/js/bundle-min.map', JSON.stringify(JSON.parse(minified.map))); });

index ： 

 <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="js/bundle-min.js"></script> </body> </html>

通过Rack :: Static服务站点时，我得到的源地图很好。 这里的config.ru ： 

 use Rack::Static, :urls => ["/js"], :root => "public" run lambda { |env| [ 200, { 'Content-Type' => 'text/html', 'Cache-Control' => 'public, max-age=86400' }, File.open('public/index.html', File::RDONLY) ] }

但是当npm install underscore在sourcemaps目录中npm install underscore时，我没有得到源映射。

有谁知道为什么发生这种情况？ 我也没有在Chrome控制台中发现任何错误，在这两种情况下，我都看到源地图可以正常下载： 

 127.0.0.1 - - [15/Jul/2015 19:26:55] "GET /js/bundle-min.js HTTP/1.1" 304 - 0.0003 127.0.0.1 - - [15/Jul/2015 19:26:55] "GET /js/bundle-min.map HTTP/1.1" 304 - 0.0003 127.0.0.1 - - [15/Jul/2015 19:26:55] "GET /favicon.ico HTTP/1.1" 200 - 0.0005

需要其他节点模块（例如react ，或exorcist ），并留下underscore ，让我在Chrome开发工具的源地图就好了。

另外，从streampipe道中取出uglify-js ，但留下underscore给我正确的源映射！ 嗯…

有相同的问题，但没有browserify，我只是想连接多个文件一起gulp，然后uglify他们，并生成一个源代码。 我刚刚发现，如果我从下面的等式中强调它的工作，但如果我留下下划线，源地图将无法正常工作。

我find了引起问题的下划线的部分，只是不知道什么可以解决这个问题。

这是_.template（）的这一部分; function： 

 source += text.slice(index, offset).replace(escaper, escapeChar);

看起来像有效的代码，我不明白。

我得到了这个工作，使用minifyify ，禁用caching，而开放的工具，并清除浏览器caching。 我也使用gulp-sourcemaps工作 。

通过HTTP或文件系统提供服务时，我可以看到源地图。 这对你有用吗？ 如果是这样，我将用这个作为接受的答案。

这里是minifyify的代码片段： 

 gulp.task 'bundle', (done) -> browserify(entries: DEST.js('grid.js'), debug: true) .plugin 'minifyify', map: 'bundle-min.map' output: 'public/js/bundle-min.map' .bundle (err, src, map) -> fs.writeFile DEST.js('bundle-min.js'), src done?()

并使用gulp-sourcemaps ：buffer = gulp-sourcemaps = gulp-sourcemaps -source-stream'uglify = require'gulp-uglify'sourcemaps = require'gulp-sourcemaps' 

 gulp.task 'bundle', (done) -> browserify(entries: DEST.js('grid.js'), debug: true) .bundle() .pipe(exorcist(DEST.js('bundle-min.js.map'))) .pipe(source(DEST.js('bundle-min.js'))) .pipe(buffer()) .pipe(sourcemaps.init(loadMaps: true)) .pipe(uglify()) .pipe(sourcemaps.write()) .pipe(gulp.dest('.'))

我仔细阅读了一下他们的源代码，看看他们做了什么，我做错了什么，但最终我只是想开始写我的应用程序:)。

Interesting Posts