Lấy bản đồ nguồn làm việc với mã được đánh giá

Question

Tôi có một tập lệnh xây dựng chạy tất cả mã của mình thông qua uglifyj, thực hiện một loạt các công cụ lưu trong bộ nhớ cache và cuối cùng chạy eval(code) trên một số tệp JavaScript.

Tôi đang cố gắng để có được toàn bộ quá trình này và chạy với source maps, nhưng tôi không thể làm cho nó hoạt động miễn là tôi đang sử dụng eval. Nếu tôi liên kết đến các tập tin trực tiếp bằng cách sử dụng <script src="..."> nó hoạt động tốt.

Trong mã eval tôi, tôi có:

code, blah blah blah 
//@ sourceMappingURL=/cache/618a67795c7460184bd9b99020cbb9fd.map 

và sau đó ở chỗ .map tập tin, tôi có:

{ 
     "version" : 3 
    , "file"  : "618a67795c7460184bd9b99020cbb9fd.map" 
    , "sources" : ["/js/Parallax-JS/js/parallax-2.js"] 
    , "names" : [ 
      "a" 
     , "bunch" 
     , "of" 
     , "variable" 
     , "names" 
    ] 
    , "mappings" : "... LONG MAP ..." 
} 

Tôi đã thử đặt //@ sourceURL= ở cuối thay vào đó, và có ít ít nhất cung cấp cho tôi tên tệp chính xác, nhưng vẫn không có nguồn có thể đọc được.

Bất kỳ ý tưởng nào? Kiểm tra trong Chrome 25 (dev) và 26 (canary)

Answer 1

Dưới đây là một thiết lập sử dụng Grunt để biên dịch javascript để tập tin duy nhất sử dụng làm xấu đi với một bản đồ nguồn

package.json

"src": { 
    "js": "src/js" 
}, 
"dest": { 
    "js": "bin/js" 
} 

Gruntfile. js

grunt.initConfig({ 
    /** 
    * Loading in the package file to read source and destination directories 
    */ 
    pkg: grunt.file.readJSON('package.json'), 
    uglify: { 
    options: { 
     banner: '/* all.min.js <%= grunt.template.today("dd-mm-yyyy") %> */\n', 
     sourceMap: '<%= pkg.dest.js %>/all.min.js.map', 
     sourceMappingURL: 'all.min.js.map', 
     sourceMapRoot: '../../', 
     mangle: false 
     /*mangle: { 
      except: ['jQuery'] 
     }*/ 
    }, 
    js: { 
     src: [ 
      '<%= pkg.src.js %>/**/*.js' 
     ], 
     dest: '<%= pkg.dest.js %>/all.min.js' 
    } 
    } 
}; 

grunt.loadNpmTasks('grunt-contrib-uglify'); 
grunt.registerTask('min', ['uglify']); 

nào tạo ra các tập tin sau đây:

all.min .js

/* all.min.js 04-10-2013 */ 
angular.module("App",[]) 
//# sourceMappingURL=all.min.js.map 

all.min.js.map

{"version":3,"file":"bin/js/all.min.js","sources":["src/js/App.js"],"names":["angular","module"],"mappings":"AAeAA,QAAQC","sourceRoot":"../../"} 

Answer 2

Tôi đã có một vấn đề tương tự và giải pháp dường như được sử dụng một SourceMaps inlined (DataURL của một SourceMap).

Dưới đây là một ví dụ:

eval("blah blah\n//@ sourceMappingURL=data:application/json;base64,...");

Có vẻ như bạn không có thể tham khảo các nguồn lực bên ngoài từ một eval.

Tôi nghĩ bạn cũng cần sử dụng sourcesContent để chèn mã nguồn vào Bản đồ nguồn.

Đã thử nghiệm với Chrome 32.