reactjstypescriptoutputcommonjs

Converting many typescript files into 1 js file while also using commonJS modules

I've been working with the "--out" compiler flag to create 1 javascript output file. I have many .ts files and was managing this by placing this in the top of every file:

/// <reference path="../references.ts" />

Now I'd really like to use React.js in this project. And the only way to 'properly' use react in Typescript (so that I'm still able to create classes the typescript way) seems to be by using this library react-typescript

But this is library is set up by using commonjs modules and using browserify to combine them into 1 file afterwards:

import React = require('react');
import ReactTypescript = require('react-typescript');

and in the examples of the project, all .ts files first list their local .ts dependencies by using a lot of "require" calls in the top.

The thing is: When I added the --module "commonjs" flag to the compiler command, the usual behaviour of --out stopped working, as reference files were no longer included in the output. It seems the compiler cannot use --out together with --module, right?

So far I'm not sure how to convert this 'react-typescript' javascript module into an inner typescript module. So it seems to me the only way to continue is to change all my reference tags to require calls. My quetion is if this is the right approach or if there is another way?

Since I have so many files and so many dependencies, I'm worried that all these require calls would unnecessarily complicate the final code, and possible even effect the performance?

Solution

  • the compiler cannot use --out together with --module, right

    Yes. External modules and --out are mutually exclusive at the moment. There however a feature request you can track : https://github.com/Microsoft/TypeScript/issues/17

    My question is if this is the right approach or if there is another way

    external modules are recommended for any project you plan to scale. Libs are valid targets for --out but not applications.

    Since I have so many files and so many dependencies, I'm worried that all these require calls would unnecessarily complicate the final code

    Doesn't need to be painful. Look at : https://github.com/grunt-ts/grunt-ts#transforms

    possible even effect the performance?

    Any performance impact (speedwise) is minimal compared to the network download speed. It's around a 5ms on my system for 3megs of a js file for requirejs to do its stuff.