Merge and minify using requireJs, Grunt.js and TypeScript for both client and server side

I'm trying to figure out how I should manage my javascript files because it's really complicated for the moment and it's not working. (I don't use yet requireJs but I would like to)

There is the situation:

I'm building a web application (video game) in three parts:

  1. game-server - Contains database, use pomelo.js framework. Use TypeScript. Code source is not shared with the browser/web-server parts.

  2. shared - Contains shared code and config between game and web servers. Use TypeScript.

  3. web-server - Contains routes, use Express.js framework, TypeScript, contains the motor engine using Pixi framework, jQuery and so on.

There are several issue for the moment:

  1. I write code with TypeScript, in OOP, the .ts file is autoconverted in .js file by my IDE on change.

  2. The generated .js is used in the browser.

  3. The class .ts (or functions) is used internally by the server(s) (both if in /shared) and can inherit from other files.

  4. Server side is OK. No more issue on it. That means I can use the TS files, load them and use them from Node or other TS files (module.exports with node and require() function from TS or kind of preprocessing comments) Use Grunt is OK with different config file in dev/prod. Generate merged then minified files:

    a. Concat - http://pastebin.com/wajPVe1G

    b. Uglify - http://pastebin.com/E0EJ9VD6

    c. Grunt script - http://pastebin.com/GHMtReK4

    d. The process is a little tricky and I'll probably change it if I use requireJs! First I run the concat so I'll create several .tmp.js files then I use them .tmp.js to create several .min.js, sometimes I generate directly the .min.js. Then I use uglify on these .min.js.

  5. Client (browser) is NOT OK.

    a. I have to load my scripts by order, because some scripts must be included before other, like jquery.js, pixi.js, init file and more. I can't load them in order using grunt, I didn't find how. I create several *.min.js files and I included them in the good order from the html tags to solve it.

    b. I have some troubles with TypeScript

    1. Inherithance with TypeScript doesn't works browser side

    2. I have inheritance as you can see, so it's obvious I need to control granularily the import of the files

    3. Some files use module.exports or exports to exports the classes, but it doesn't exists on the browser. The only solution here is to add a global export={} in a file before load them. But it's tricky because I saw that PIXI for instance has a different behaviour if exports exists! If it does exists, then it put its classes in the exports var, don't create a global PIXI var and generate errors somewhere else because PIXI doesn't exists. So I have to change some lib I didn't write or load pixi.js before create the global export var. Really boring.

    4. I need several config with Grunt/requireJs because I have several pages with several configuration and scripts should not be in all of them.

What do I think to do to fix these issues?

  1. Don't use the concat, only the uglify module and generate a subdirectory like "js-built" and store all the files inside, uglified (minified).
  2. Use requireJs to import these files in the order I want and concat them to have only one file to load on the browser.

Do you think it could be solve my problems? because it's ... too big, I can't see everything here, I don't have any experience in requireJs and just used Grunt for three days so...

Don't hesitate to share your experience if you have done this kind of things, it's difficult to use (and learn) all of them node module at the same time.

Thank you.

PS: I'm just aware about the fact TypeScript need to be compilated in two different mode to works on the browser and on the server... Another issue ^^