group typescript files into more than one outFile

Question

Is it possible to group typescript files into more than one outFile? I still want to bundle my Typescript, but not into a single JS file, I'd like to group my TS is to several JS files e.g. controllers.js, plugins.js. The TypeScript project options seems to only provide one outfile option.

Answer 1

Unfortunately, this is no default TypeScript compiler behavior. I faced this problem myself when I tried to modularize a TypeScript application.

The solution I have decided to use for that problem:

1. Start using good old _references.ts files again.
2. Don't bundle using TSC (just compile to JavaScript).
3. Parse _references.ts files using a Gulp plugin/function. My idea:

var fs = require('fs');

// Consts
var PLUGIN_NAME = 'reference-parser';

// Plugin level function (dealing with files)
function referenceParser(fileName, prefix, filterParentReferences) {
    var references = [];

    var content = fs.readFileSync(fileName, 'utf8');
    content = content.replace(/\/\/\/ <reference path=("|')/g, prefix);
    content = content.replace(/.ts("|')\s*\/>,?/g, '.js');

    function readLines(input) {
        if (input.length === 0)
            return;

        var newLineIndex = input.indexOf('\r\n');
        if (newLineIndex >= 0) {
            var line = input.substring(0, newLineIndex).trim();

            readLine(line);

            if (input.length > (newLineIndex + 2))
                readLines(input.substring(newLineIndex + 2));
        } else {
            readLine(input);
        }
    }

    function readLine(line) {
        if (line && line.length > 0) {
            //console.log('Line: ' + line);

            if (line.startsWith('//')) {
                //console.log('Comment line, ignored.');
            } else if (line.indexOf('_references.ts') >= 0) {
                //console.log('External reference line, ignored.'); // TODO Support this?
            } else if (filterParentReferences && line.startsWith('../')) {
                //console.log('Parent reference, ignored.');
            } else {
                references.push(line);
            }
        }
    }

    readLines(content);
    return references;
}

// Exporting the plugin main function
module.exports = referenceParser;

b. Concatenate everything in a Gulp task:

//...

        // Get module source files by parsing the module's _references.ts file.
        var sourceFiles = referenceParser(sourceRoot + '_references.ts', buildJsRoot, true);
        // console.log(sourceFiles);
        var sourcesStream = gulp
            .src(sourceFiles)
            .pipe(plugins.sourcemaps.init({ loadMaps: true })) // Load TypeScript generated source maps
            .pipe(plugins.concat(module.name + '.Bundle.js'))
            .pipe(plugins.uglify({ mangle: false })) // Minify the resulting bundle
            .pipe(plugins.sourcemaps.write('.')) // Write the (merged) bundle source maps
            .pipe(gulp.dest(destinationRoot));
        moduleGulpStreams.add(sourcesStream); // Add the source stream to the stream merger

//...

Answer 2

You can achieve this by creating multiple tsconfig.json files. Then run the compiler once for each out file:

tsc -p /path/to/first/tsconfig.json --outFile controllers.js
tsc -p /path/to/second/tsconfig.json --outFile plugins.js