Newbie: I must be loading renderer <script src wrong?


#1

I haven’t seen a solution yet that allows me to load <script>'s in my renderer html in the right order. Many packages (such as highchartsjs graphs, or packeryjs) load according to the network log of the chrome debug window, but their objects do not show up (such as window.Highcharts). Currently this has been my solution, inside of the renderer html. Is there a better way?

    <script src="/client/js/highcharts.src.js"></script>
    <script src="client/js/map.src.js"></script>
    <script src="client/js/data.src.js"></script>
    <script src="client/js/exporting.src.js"></script>
    <script src="client/js/world.js"></script>
    <!-- 'ma is not a function' error is expected, i guess -->

    <script>
        // And because highcharts is completely not ready for nodewebkit or electron
        // This beauty:
        if('require' in window) {
            console.log(__dirname);
            console.log(__filename);
            console.log("versions", process.versions);
            if ( !('Highcharts' in window) ) {
                console.log("highcharts load issue");
                var prefix = "";
                var requireFailed = true;
                try {
                    prefix = "../../../app/"; // inside distributed electron app
                    window.Highcharts = require(prefix+"client/js/highcharts.src.js");
                    requireFailed = false;
                }
                catch(e) {
                    try {
                        prefix = "../../../../../../../"; // inside npm installed electron LINUX
                        window.Highcharts = require(prefix+"client/js/highcharts.src.js");
                        requireFailed = false;
                    }
                    catch (e) {
                        try {
                            prefix = "../../../../../../../../../"; // inside npm installed electron OSX
                            window.Highcharts = require(prefix+"client/js/highcharts.src.js");
                            requireFailed = false;
                        }
                        catch (e) {
                            console.log("Loading issue. no charts for you!",e);
                            requireFailed = true;
                        }
                    }
                }

                if (requireFailed == false) {
                    try {
                        require(prefix+'client/js/map.src.js')(window.Highcharts);
                        require(prefix+'client/js/data.src.js')(window.Highcharts);
                        require(prefix+'client/js/exporting.src.js')(window.Highcharts);
                        require(prefix+'client/js/world.js');
                    }
                    catch (e) {
                        console.log("Loading issue with sub modules")
                    }
                }
            }
        }
    </script>

The same html code runs fine when loaded just within a normal webserver.