Come sviluppare app in-browser più grandi per client-site in javascript?

-1

Sono nuovo nell'ambiente javascript (ho esperienza in simulazioni fisiche e motori di gioco in C ++). Con l'aumento di HTML5 e WebGL pensavo che mi piacerebbe provare a realizzare alcuni giochi / editor 3D usando javascript.

Il problema è che un progetto più grande come il gioco con motore 3D inizia a essere molto complicato. Invece del sistema di build ( makefile , cmake ) ho appena index.html come questo.

<!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><scriptsrc="../../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>

Dopo un po 'perdo traccia quale funzione / classe è definita dove, e quali sono gli argomenti a quali funzioni (che è anche peggio quando non c'è controllo di tipo, quindi hai capito che gli argomenti di funzione sono sbagliati solo quando ottieni runtime errore)

  • È possibile utilizzare in qualche modo node.js e / o typescript per questo lavoro. ?
  • C'è qualche IDE / editor gratuito su Linux (attualmente utilizzo vscode) dove go to definition funziona per la funzione definita in diversi .js file collegati solo da index.html
posta Prokop Hapala 12.06.2018 - 07:10
fonte

1 risposta

1

Sì, puoi utilizzare una configurazione di Webpack con il plug-in Typescript. Puoi trovarli con Node Package Manager. C'è un po 'di configurazione iniziale della configurazione, ma ne vale la pena.

L'installazione consente di utilizzare i moduli ES6 e le classi con controllo di tipo statico. Webpack raggruppa i moduli per te in modo da poter strutturare fisicamente il progetto come 1 modulo / classe per file e non è necessario preoccuparsi di inquinare l'ambito globale.

    
risposta data 12.06.2018 - 13:33
fonte