Search code examples
javascriptphantomjsgoogle-closure-compiler

Closure compile Can't find variables after minification


I am using closure compiler to create single javascript file for all my code. I am running my code through PhantomJS.

here is my code

function process(inputParams, dataCollector) {
    var webpage = require('webpage').create();
 webpage.open(entityResolvedFilePath, function(status) {
var hasnodes = webpage.evaluate(function() {                      
                        var nodesInfo= (document.getElementsByTagName('requirednode').length;
                        if (nodesInfo) {
                            MathJax.Hub.Register.MessageHook("Math Processing Error",function (message) {
                               throw message;
                           });


                           MathJax.Hub.queue.Push(function() {
                              mathJaxCleaner.cleanMathJaxOutput();
                               window.callPhantom();
                           });

                       }
                           return hasMathNodes;
                       });

                       if (!hasMathTags) {
                           webpage.onCallback();
                       } 
            }
            else {
                webpage.onCallback();
            }
        }
    });

I wanted to call cleanMathJaxOutput function inside MathJax.Hub.queue.Push. It works locally because i am not running minified code locally. But when i minify this code through closure compile then my code fails with and error that reference error could not find mathJaxCleaner This might be happing becasue Phantomjs's webpage.evaluate create a different closure scope where i don't have to global variable mathJaxCleaner.

I have declared cleanMathJaxOutput like this.

var mathJaxCleaner = new Object();
mathJaxCleaner.cleanMathJaxOutput =function() {}

I have also tried to declare mathJaxCleaner as a function and then attached functions on it's prototype but none of thing worked for me. After minification code become something like this.

var P = {
    A: function() {
        function a(a) {
            a && a.parentNode.removeChild(a)
        }

        function b(a) {
            if (a)
                for (; 0 != a.length;) this.removeNode(a[0])
        }

        function d(a) {
            var b = document.createElement("defs");
            a.insertBefore(b, a.childNodes[0]);
            a = a.getElementsByTagName("use");
            for (var c = 0; c < a.length; ++c) {
                var d = a[c].getAttribute("href");
                b.appendChild(document.getElementById(d.substr(1)).cloneNode(!0))
            }
        }
        for (var c = document.getElementsByClassName("MathJax_SVG"), e = 0; e < c.length; e++) {
            for (var f = c[e], v = f.childNodes, w = 0; w < v.length; w++) "svg" ==
                v[w].tagName && d(v[w]);
            f.style.fontSize = "inherit";
            "inline-block" === f.style.display && (f.style.display = "inline")
        }
      some more code here...
    }
};

Function call in minified code look likes P.A() but at execution time PhantomJS says Reference error Can't find variable: P

How to fix this issue.


Solution

  • I got it the solution for this problem.

    In PhantomJS function inside of webpage.evaluate is not just a closure, it exists inside of another context (that of a webpage) in which all outer variables and function do not exist, but a web page's DOM is available instead.

    So I have added my function explicitly in window object.

    window['myfunctionName'] = myfunctionName;
    function myfunctionName()
    {
    // do something
    }