-1

I'm new to javascript environment (I have background in C++ physical simulations and game engines). With rise of HTML5 and WebGL I was thinking I'd like to try make some games/3D editors using javascript.

Problem is that larger project like game with 3D engine starts to be very messy. Instead of build system (makefile, cmake) I have just index.html like this.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - trackball controls</title>
        <style> body { margin: 0; overflow: scroll;; } </style>
    </head>
    <body>
    <!--script src="three.min.js"></script-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script> 
    <script src="../../js_libs/ThreeJS/TrackballControls.js"></script>
    <script src="../../js_libs/ThreeJS/ThreeJS_aux.js"></script>
    <script>
            var screen;
            function main() {
                screen  = new THREE.Screen( document.getElementById("GLScreen") );
                screen.render();
                screen.animate();
            }
    </script>
    <body onLoad="main()">
        <div style="width: 800px;height: 400px;" id="GLScreen"></div>
    </body>
    </body>
</html>

After a while I loose track which function/class is defined where, and what are the arguments to which functions (which is even worse when there is not type-checking, so you realized function arguments are wrong only when you get runtime error)

  • Is it possible to employ somehow node.js and/or typescript for this job. ?
  • Is there some free IDE / editor on Linux (currently I use vscode) where go to definition works for function defined in different .js files linked just by index.html
  • Possible duplicate of A testing environment for JavaScript other than browser? – Doc Brown Jun 12 '18 at 8:56
  • I'm completely fine with testing in firefox/chrome browser. I have problem to navigate in my project. I'm used to C++ IDE which gives me hints about function/class names and parameters defined in libraries. While in javascript editors knows nothing about what is defined inside libraries or other .js files. I don't get how people can develop large apps conveniently this way. So I think I'm missing somethon - that serious javascript developer must have workflow unknown to me. – Prokop Hapala Jun 12 '18 at 9:32
  • This isn't a question looking for tool/software recommendations, nor is this a forum for those kind of questions, however @Rob's answer below is on point. TypeScript exists mainly to solve the issues you're mentioning. Combine it with WebPack and you should be a lot happier. – neilsimp1 Jun 12 '18 at 12:27
  • 1
    TypeScript + Webpack could definently the solution for you. Using 'import' statements, you are able to split up your code by it's behaviour. Using TypeScript you have type-checking. Visual Studio Code has an great TypeScript support though. After reading your comment you might also check frameworks like eg Vue or Angular. – JoeriShoeby Jun 12 '18 at 15:46
1

Yes you can use a setup of Webpack with the Typescript plugin. You can find these with the Node Package Manager. Theres abit of initial config setup but its worth it.

The setup will let you use ES6 modules and Classes with static type checking. Webpack bundles the modules together for you so you can physically structure the project as 1 module/class per file and theres no need to worry about polluting the global scope.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.