Question

在我的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并创建源图的节点脚本：

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时，我没有获得源地图。

有谁知道为什么会这样？我也没有在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开发者工具中的源地图。

此外，从流管道中取出uglify-js但保留underscore会为我提供正确的源图！唔...

Answer 1

有相同的问题，但没有浏览器，我只是尝试与gulp连接多个文件然后uglify它们并生成一个源图。而我刚刚发现，如果我将下划线从等式中运用，但如果我留下下划线，则源地图将无法正常工作。

Answer 2

我发现导致问题的下划线部分，只是不确定会解决什么问题。

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

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

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

Answer 3

我使用minifyify工作，在dev-tools打开并清除浏览器缓存时禁用缓存。我还使用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 = require'乙烯基缓冲液' source = require'vinyl-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('.'))

我仔细阅读了他们的源代码，试着看看他们正在做什么以及我做错了什么，但最终我只是想开始编写我的应用程序:)。

uglifying下划线在browserify

3 个答案: