使用浏览器版uglify.js报错：UglifyJS.minify不是函数

使用浏览器版UglifyJS实现文件拖拽压缩功能时，控制台报错 UglifyJS.minify is not a function at FileReader，核心问题是你调用了当前版本UglifyJS不存在的API。

问题根源 #

你引入的这个浏览器版UglifyJS是早期版本，它的API和现代npm版差异很大——没有封装好的UglifyJS.minify()便捷方法，必须手动完成代码解析→AST压缩→代码生成的完整流程。

修复方案 #

替换原代码中调用UglifyJS.minify的部分，改用该版本原生的三步压缩流程：

• 用UglifyJS.parser.parse()将原始代码解析为抽象语法树(AST)
• 用UglifyJS.uglify.ast_mangle()混淆AST
• 用UglifyJS.uglify.ast_squeeze()压缩AST
• 用UglifyJS.uglify.gen_code()将处理后的AST转换为压缩代码

修正后的完整代码 #

<!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 JS 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) {
                        try {
                            // 按该版本UglifyJS的标准流程执行压缩
                            var ast = UglifyJS.parser.parse(e.target.result);
                            ast = UglifyJS.uglify.ast_mangle(ast);
                            ast = UglifyJS.uglify.ast_squeeze(ast);
                            var minfd = UglifyJS.uglify.gen_code(ast);
                            
                            filesAr.push({name: file.name, min: minfd});
                            console.log('压缩完成:', file.name);
                        } catch (err) {
                            console.error('压缩失败:', file.name, err.message);
                        }
                    };
                })(f);
                reader.readAsText(f);
            }
            // FileReader是异步操作，延迟输出确保结果已生成
            setTimeout(() => console.log('所有压缩文件:', filesAr), 1000);
        }
        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = 'copy';
        }
        dz.addEventListener('dragover', handleDragOver, false);
        dz.addEventListener('drop', handleFileSelect, false);
    </script>
</body>
</html>

额外说明 #

• 原提示文字“Drag and drop HTML files”改为“Drag and drop JS files”，因为UglifyJS仅支持JS文件压缩
• 添加try/catch块捕获压缩时的语法错误，比如文件不是合法JS的情况
• 原代码中循环后直接console.log(filesAr)会输出空数组，因为FileReader是异步操作，增加延迟输出保证能看到完整结果

内容的提问来源于stack exchange，提问作者Mikey Muss