next »

[paulisere]

Hi

I have been working on a HTML5/Javascript game, largely to improve my knowledge of the technologies.  I am a C++ programmer and so I have been writing my game to be object oriented (usually one class per .js file) and include unit tests etc.

I wondered how people manage their "includes" to put it in C++ terms.  I have found that I need to include the names of my script files in my .html file, but I now have around 50 lines of:
<script src=... ></script>
for all of the different classes that I have, which just doesn't seem right.  It would be nice to be able to say in my Javascript file which other JS files it depends on.

I don't know if this is possible, it would be great if someone could provide me with some pointers.

Paul

[Polly]

I wondered how people manage their "includes" to put it in C++ terms.

Most developers use a javascript "compiler" that generates a single optimized / minified javascript file from your multi-file javascript project ( for releases at least ).

It would be nice to be able to say in my Javascript file which other JS files it depends on.

You still got your C++ thinking cap on

[pelle]

The typical way of handling this is by pre-processor/buildsystem, merging all the files into one and runs a minimizer/optimizer on all of the results as one big file. There are also libraries that you can include files for you (dynamically adding script input tags in the browser) but I am not sure when that would be a better idea than optimizing everything into one big file.

[paulisere]

Ah, that's interesting.  So for general development and debugging you would include all of the files in your HTML file, then at release time you would use something like this:
https://developers.google.com/closure/compiler/?hl=en
to convert it into just one file?

Paul

[Whiskas]

I wrote a small command line tool in C# that I can use to either concatenate all the files or minify them using the Closure compiler.

It adds support for #include <???.js> in source files, what I do is create a Compile.js file and put all my include directives inside (you still can use include in files you include from there).

It's not the best thing ever (like, I don't think it ever displays Closure error reporting so if it fails I have to check that myself), but it's tailored to my needs.

[pelle]

Ah, that's interesting.  So for general development and debugging you would include all of the files in your HTML file, then at release time you would use something like this:
https://developers.google.com/closure/compiler/?hl=en
to convert it into just one file?

You can do that, or you can do like is done in ClojureScript (with Leiningen build tool): When you develop/debug everything runs through Google Closure with some flag to not optimize the code so hard, and to keep symbols so you can still use a debugger and map symbols back to the original source files (JavaScript in all or most browsers supports source-mappings these days, much like if you debug C++) then wen you make a release-build some flag is added to make Closure instead minimize everything very hard (I guess you can still get a source-mapping somehow though?).

EDIT: Here is how to use source maps in Chrome: https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps, if you want to be able to debug your code but still just have everything suffed into one file for instance, and be able to see where everything came from originally.

[Layl]

What you are probably looking for is "import" in ES6. You will need a transpiler for this to work on browsers, but you should be using that anyways.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Here's a popular transpiler:
https://babeljs.io/

I like to use it with webpack for combining everything together:
http://webpack.github.io/

[Nitramtj]

I also recommend using babel and webpack.

There are several popular ways to modularize your JavaScript, but ES6's import/export is now the standardized way to do it. Babel can transpile your ES6 code into a version that will run on browsers. Webpack can bundle your code into a single file that the browser can load (through one script tag to the output file.)

Once you have this setup, you can import files as you were wanting. You can develop in this format, and have webpack instantly rebuild as you change your code. The output code will be in a single file, but as pelle said, you can use source maps to make the debugger show the individual files.

You will need npm and Node.js/npm to install/run babel and webpack. Node.js is a JavaScript runtime and npm is a package manager. It might be a bit of a hassle to install these and set your project up, but this will let you take advantage of the modern tools and libraries.

[NoobsArePeople2]

I'll echo the ES6/2015 + Babel recommendations.

You should also look into a task runner like Grunt or Gulp to automate your build process.

[Quarry]

http://requirejs.org/

https://github.com/volojs/create-template

[zleub]

For my daily stuff, i have a few lines function that use jquery for getting distant files and building depencies between them.

The only advantage is not to have any settlement to take care of, I probably wont use it outside development context.

[1kW]

Hi

I have been working on a HTML5/Javascript game, largely to improve my knowledge of the technologies.  I am a C++ programmer and so I have been writing my game to be object oriented (usually one class per .js file) and include unit tests etc.

I wondered how people manage their "includes" to put it in C++ terms.  I have found that I need to include the names of my script files in my .html file, but I now have around 50 lines of:
<script src=... ></script>
for all of the different classes that I have, which just doesn't seem right.  It would be nice to be able to say in my Javascript file which other JS files it depends on.

I don't know if this is possible, it would be great if someone could provide me with some pointers.

Paul

The only way to do that is to write (or copy from SO) a dynamic js file loader

[evercalm]

Hi

I have been working on a HTML5/Javascript game, largely to improve my knowledge of the technologies.  I am a C++ programmer and so I have been writing my game to be object oriented (usually one class per .js file) and include unit tests etc.

I wondered how people manage their "includes" to put it in C++ terms.  I have found that I need to include the names of my script files in my .html file, but I now have around 50 lines of:
<script src=... ></script>
for all of the different classes that I have, which just doesn't seem right.  It would be nice to be able to say in my Javascript file which other JS files it depends on.

I don't know if this is possible, it would be great if someone could provide me with some pointers.

Paul

You can try Browserify. It compiles (merging all JS files) node-like JS code into one bundle (file), but you have to write in the node-way (as commonJS modules). Another thing you can do is to write a simple script that will merge all files into one file (or there's probably some gulp plugin).