uglify.js,浏览器版本返回“不是函数”

uglify.js, browser version returns "is not a function"

提问人:Mikey Muss 提问时间:2/22/2023 最后编辑:Mikey Muss 更新时间:2/22/2023 访问量:253

问:

使用uglify.js浏览器版本,如上所述,在OP的第一条评论中,并在Chrome控制台中出现此错误:“UglifyJS.minify不是FileReader的函数。

使用的代码:

<!DOCTYPE html>
<html>
<head>
    <script src="https://lisperator.net/s/js/uglifyjs/uglify.js"></script>
    <style>
        #drop_zone{
            width: 300px;
            height: 300px;
            border: 2px dashed #bbb;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="drop_zone">
        <span>Drag and drop HTML files to minify</span>
    </div>
    <script>
        console.log(UglifyJS);
        var filesAr = [],
        dz = document.getElementById('drop_zone');
        function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            var files = evt.dataTransfer.files;
            for (var i = 0, f; f = files[i]; i++) {
                var reader = new FileReader();
                reader.onload = (function(file) {
                    return function(e) {
                        var minfd = UglifyJS.minify(e.target.result).code;
                        filesAr.push({name: file.name, min: minfd});
                    };
                })(f);
                reader.readAsText(f);
            }
            console.log(filesAr);
        }
        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = 'copy';
        }
        dz.addEventListener('dragover', handleDragOver, false);
        dz.addEventListener('drop', handleFileSelect, false);
    </script>
</body>
</html>

这段代码有什么问题?

JavaScript 缩小 客户端 UglifyJS

评论

0赞 Melbourne2991 2/22/2023
console.log(UglifyJS)能给你什么?
0赞 Mikey Muss 2/22/2023
{AST_Token: ƒ, AST_Node: ƒ, AST_Statement: ƒ, AST_Debugger: ƒ, AST_Directive: ƒ, ...}

答:

0赞 Melbourne2991 2/22/2023 #1

minify 似乎不是一个函数。请参阅此处您正在使用的代码的说明:https://lisperator.net/uglifyjs/mangle

替换为以下内容,您应该会得到所需的结果。UglifyJS.minify(e.target.result).code;

let ast = UglifyJS.parse(code);

// compressor needs figure_out_scope too
ast.figure_out_scope();
let compressor = UglifyJS.Compressor()
ast = ast.transform(compressor);

// need to figure out scope again so mangler works optimally
ast.figure_out_scope();
ast.compute_char_frequency();
ast.mangle_names();

// get Ugly code back :)
let code = ast.print_to_string();

评论

0赞 Mikey Muss 2/22/2023
这给了我:code未在FileReader.<anonymous中定义>
0赞 Melbourne2991 2/22/2023
现在再试一次(我做了一个编辑),这是一个工作示例:codesandbox.io/s/wizardly-hill-cn99np?file=/src/index.js
0赞 Mikey Muss 2/22/2023 #2

<!DOCTYPE html>
<html>
<head>
    <script src="https://lisperator.net/s/js/uglifyjs/uglify.js"></script>
    <style>
        #drop_zone{
            width: 300px;
            height: 300px;
            border: 2px dashed #bbb;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="drop_zone">
        <span>Drag and drop HTML files to minify</span>
    </div>
    <script>
        var filesAr = [],
        dz = document.getElementById('drop_zone');
        const UglifyJS = window.UglifyJS;
        console.log(UglifyJS);
        function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            var files = evt.dataTransfer.files;
            for (var i = 0, f; f = files[i]; i++) {
                var reader = new FileReader();
                reader.onload = (function(file) {
                    return function(e) {
                        let ast = UglifyJS.parse(e.target.result);
                        ast.figure_out_scope();
                        let compressor = UglifyJS.Compressor()
                        ast = ast.transform(compressor);
                        ast.figure_out_scope();
                        ast.compute_char_frequency();
                        ast.mangle_names();
                        let code = ast.print_to_string();
                        console.log(code);
                        filesAr.push({name: file.name, min: minfd});
                    };
                })(f);
                reader.readAsText(f);
            }
            console.log(filesAr);
        }
        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = 'copy';
        }
        dz.addEventListener('dragover', handleDragOver, false);
        dz.addEventListener('drop', handleFileSelect, false);
    </script>
</body>
</html>

这是我现在所拥有的:我必须放置上传的文件内容,因此 UglifyJS.parse(e.target.result); 但仍然没有喜悦...... 我进入控制台: 未捕获的 $ {message: '意外的令牌:运算符 (<)' 对于每个文件。

评论

0赞 Mikey Muss 2/22/2023
这是对下面Melbourne2991建议的回复
0赞 Mikey Muss 2/22/2023
@melbourne2291:公平地说,这个问题已经回答了。我上面提到的错误涉及对删除文件的解析。
0赞 Melbourne2991 2/24/2023
只是在这里猜测,代码是否包含任何 jsx?可能就是这样?
0赞 Mikey Muss 3/20/2023
对不起,回答晚了。它不是 jsx,而是 ES6。该版本的 uglify 仅支持 ES5。