4

我正在使用 grunt-contrib-uglify 插件来压缩我的 javascript 源文件以进行生产。

当我尝试在 chrome 的开发工具（或 firefox 的）中调试函数时，就会出现问题。

我在 Gruntfile.js 的 uglify 任务配置中设置了 mangle:true （默认值），并且 uglifyjs 对生成的代码中的变量名进行了 mangles（缩短和重命名）。

这些变量没有正确映射到它们原来的局部变量名。所以调试很痛苦。

有什么想法可以解决这个问题吗？

下面是我的 Gruntfile.js

/* global module */

module.exports = function (grunt) {

    grunt.initConfig({
        copy: {
            production: {
                files: [
                    {
                        expand: true,
                        cwd: "./development/js/",
                        src: "./*",
                        dest: "./production/js/debug/"
                    }
                ]
            }
        },

        uglify: {
            production: {
                options: {
                    sourceMap: true
                    /* mangle: false */
                },

                files: {
                    "./production/js/one.min.js": ["./development/js/one.js"],
                    "./production/js/two.min.js": ["./development/js/two.js"]
                    //"./production/js/app.js": ["./development/js/one.js" , "./development/js/two.js" ]
                }
            }
        }
    });

    // [STEP] Load required GRUNT plugins
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // [STEP] Register tasks
    grunt.registerTask("default", ["copy:production", "uglify:production"]);
};

我的目录结构基本上是，

Project ROOT dir

--F-- package.json
--F-- Gruntfile.json

--D-- node_modules
--*---- * (module files folders)

--D-- development
--D---- js
--F------ one.js
--F------ two.js

--D-- production
--D---- js (generated from grunt)
--*------ * (generated files)
--D------ debug (generated from grunt)
--*-------- * (generated files)
--F---- index.html
4

1 回答 1

1

这里也问了一个类似的问题：Breakpoint debugging minfied/mangled/compiled variables

我今天遇到了这个问题。在 Chrome 和 Firefox 中似乎是一致的行为，这表明它是源映射规范中的一个限制。

Chromium 存在这个未解决的问题：https ://code.google.com/p/chromium/issues/detail? id=327092 建议需要更新源映射规范以适应此问题。

如果您在缩小代码时使用名称修饰，或者代码被转译（例如，编写通过 Babel 传递的 ES2015），则会出现此问题。似乎目前的解决方案是等待源映射更新以处理这种转换。

于 2015-12-02T22:58:34.263 回答