Better way to organize TypeScript scripts

[plicatibu]

Hi.

I need your help to organize my files.

Currently I create many files (say, boot.js, preloader.js, scene1.js, scene2,js, and so on) in the same folder.

Then I concatenated them and generate a file named game.js that is finally minified to provide me a file named game.min.js.

This approach makes it a peace of cake to have just one minified file, but I'd like to organize them in folders similar to what I do in other programming languages.

I could put JavaScript files in folder and concatenate them as I'm doing now and it would work.

It doesn't work with TypeScript. For TypeScript files I have to use require command to read content from files (say, var s1 = require('./scene/scene1.js')).

So it makes harder to concatenate all files on a bigger one.

How do you handle this? 

Thank you.

[mattstyles]

Use a proper module system to wrap up your code rather than just concatenation, which is brittle. I thought the TS build tools did this for you? In any case, https://www.typescriptlang.org/docs/handbook/react-&-webpack.html, is an example of using a bundler with TS.

There are better ways of course, but its a starting point for you.

Other tools you might want to check:

* Babel -> has TS plugins

* Buble -> Is also a language converter, not sure about TS support though

* Esprima -> Another transform runner, but, seriously, just use babel + TS plugin for now and have done with

* Browserify -> Bundles all your code up, easiest to use with Babel + plugins to do transforms

* Webpack -> Bundler

* Rollup -> Bundler

There are loads of good JS bundlers out there, but, in my opinion, I'd choose one of the above, probably browserify + babel, although webpack continues to make ground on it for some reason, I think its the fear of good cli tooling that scares people off.

[plicatibu]

I didn't know these tools. Thank you a lot for your help.