Come ottenere mappe di origine che funzionano con codice valutato

Question

Ho uno script di compilazione che esegue tutto il mio codice attraverso uglifyjs, fa un sacco di cose fantasiose nella cache e alla fine esegue eval(code) su alcuni file JavaScript.

Sto cercando di ottenere l'intero processo attivo e funzionante con source maps, ma non riesco a farlo funzionare fino a quando sto usando eval. Se collego direttamente i file usando <script src="...">, funziona perfettamente.

Nel mio codice eval, ho:

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

e poi in quel file .map, ho:

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

Ho provato a mettere //@ sourceURL= alla fine, invece, e che in mi dà almeno il nome corretto del file, ma ancora nessuna fonte leggibile.

Qualche idea? Testing in Chrome 25 (dev) e 26 (canarino)

Answer 1

Qui è una messa a punto utilizzando Grunt per compilare javascript per singolo file utilizzando uglify con una mappa fonte

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']); 

che crea i seguenti file:

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

Ho avuto un problema simile e la soluzione sembra stia usando una SourceMaps inline (DataURL di un Sourcemap).

Ecco un esempio:

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

Sembra come non è possibile fare riferimento a risorse esterne da un eval.

Penso che sia necessario utilizzare sourcesContent per inserire il codice sorgente in SourceMap.

Testato con Chrome 32.