Typescript why and when requirejs is needed

Question

This is more a general question on why and when requirejs is needed with Typescript. I have done some work with requireJs before and always used the r.js build script before deploying. As I understand the build script which merges all the js files (modules), is to lower the amount of http request and ofcourse provide a way to modulaize your code.

My question is this: Since typescript already provides an easy way of separating code into modules, why not just merge the the resulting js files, instead of the extra step of using requirejs to handle the modules? If working on larger projects, I understand that all js should not be loaded at all at once, but I assume one would still bundle modules in some way.

Edit: To be more specific: Why use requireJs for managing my modules and not just stick to typescript internals modules, which as i understood can also be loaded at runtime. Internal modules vs. external modules based on amd and requirejs.

Answer 1

The only reason you would choose to use RequireJS for running your TypeScript program in a browser would be if you had hundreds of modules, but the page may only need two or three to perform its actions. We are talking serious big programs here, not lightweight apps or additional funky stuff for a web page.

Using RequireJS for a really big application means you only load the scripts you really need - not everything just in case.

For the sake of an example, imagine you wrote Microsoft Office as a TypeScript program, you could use RequireJS to load just the stuff you need as you need it. So at first, you'd load what you need for exploring files, then when a file was selected it would cause that module (maybe Word) to load, with its dependencies. This might mean you've downloaded only 10% of the program in several small chunks.

Module Loaders

TypeScript doesn't have its own module loader. It compiles TypeScript into JavaScript converting your module import statements into either CommonJS or AMD style code. Asynchronous Module Definition (AMD) is the module format used by RequireJS. CommonJS modules are used by NodeJS. You need to lean on these module loaders whether you are using TypeScript or JavaScript.

TypeScript simply transforms this:

import myModule = module('mymodule');

Into either require or define statements as per section 10.4 of the TypeScript Language Specification.

Answer 2

If you load just one JS-File during pageload, you wouldn't need requireJS.
You do need requireJS if you have multiple js-files, and if you want to have them loaded not in the index.html, but during runtime of your script. These will be loaded asynchron and only once. The code after requiring a script is only executed after the loading of the required script. This can be especially useful for lazy loading, when you are not sure if a module will be required at all by the user.
The other benefit is that module dependency is defined in each module, since each module that needs an other module to work can then include the appropriate "require"-Statements.