获取使用评估代码的源映射答案

【问题标题】：Getting source maps working with evaluated code获取使用评估代码的源映射
【发布时间】：2013-01-17 09:13:18
【问题描述】：

我有一个构建脚本，它通过 uglifyjs 运行我的所有代码，做一堆花哨的缓存工作，并最终在一些 JavaScript 文件上运行 eval( code )。

我正在尝试使用source maps 启动并运行整个过程，但只要我使用eval，我似乎就无法让它工作。如果我使用<script src="..."> 直接链接到文件，它工作正常。

在我的eval 代码中，我有：

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

然后在那个.map 文件中，我有：

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

我尝试将//@ sourceURL= 放在末尾，这至少给了我正确的文件名，但仍然没有可读的来源。

有什么想法吗？在 Chrome 25 (dev) 和 26 (canary) 中测试

【问题讨论】：

标签： javascript source-maps

【解决方案1】：

我遇到了类似的问题，解决方案似乎是使用内联的 SourceMaps（SourceMap 的 DataURL）。

这是一个例子：

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

似乎您无法从 eval 中引用外部资源。

我认为您还需要使用sourcesContent 将源代码插入SourceMap。

使用 Chrome 32 测试。

【讨论】：

我还是有点困惑。你能提供一个有效的jsfiddle吗？谢谢
这对我不起作用。这是一个推测性的答案还是您确认它有效？
这对我来说适用于 MacOS 的 Chrome 99.0.4844.74。

【解决方案2】：

这是一个使用 Grunt 将 javascript 编译为单个文件的设置，使用 uglify 和源映射

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

这会创建以下文件：

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":"../../"}

【讨论】：