Compile all files with -out

Topics: General
Jun 26, 2014 at 4:40 AM
Hi,

It would be super awesome if Visual Studio had the option to compile all .ts files with the tsc.exe -out flag set to the name of the original file, because at the moment, if you have a more than one typescript file that references other files in a project, you have to jump through hoops to get them all to compile.

For example, I have something like

AllClientsViewModel.ts
ClientModel.ts
AllSubscriptionsViewModel.ts
SubscriptionModel.ts

Because both AllClientsViewModel.ts and SubscriptionModel.ts need to use ClientModel.ts, I'm in a bind.

A workaround using gulp.js is a gulpfile along the lines of
var gulp = require('gulp');
var tsc = require('gulp-tsc');
var tap = require('gulp-tap');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');

gulp.task('compile-typescript', function ()
{
    return gulp.src(['Admin/Pages/*.ts'])
        .pipe(tap(function(file, t)
    {
            console.log(file.path);
            gulp.src([file.path])
            .pipe(tsc({ out: file.path.replace('.ts', '.js'), module: "amd" }))            
            .pipe(gulp.dest('.'));
        }));
});

gulp.task('typescript-watch', function () {
    watch({ glob: 'Admin/Pages/*.ts' })
       .pipe(tap(function (file, t) {
           console.log(file.path);
           gulp.src([file.path])
           .pipe(tsc({ out: file.path.replace('.ts', '.js'), module: "amd" }))
           .pipe(gulp.dest('.'));
       }));
});
Run the typescript-watch task in a cmd window, and use a post-build event to run the typescript-compile task, because Visual Studio will compile the .js files over the .js files that were built in the typescript-watch task when you last saved the file, leaving you scratching your head as to why when you hit play, your ts files have suddenly lost their referenced files.

It further, would be absolutely awesome if Visual Studio could automatically detect reference files based on what classes have been used in that particular file, much like it knows how to automatically add a project reference in C# if you use a class you haven't yet referenced :)

Regards,
Matt
Coordinator
Jun 26, 2014 at 4:47 PM
I'm probably missing something, but Visual Studio already has a setting to use the --out flag to compile all the .ts files into the same .js file. If you look in the TypeScript Build, under Output, there's "Redirect JavaScript output into a file".

You can also configure the order they go out using a _references.ts file. You also don't need to use ///ref when inside of a project, as all the files should be able to see each other.
Jun 26, 2014 at 10:01 PM
Edited Jun 26, 2014 at 10:23 PM
No, I've just not been clear. I don't want just 1 .ts into 1 .js, I want each .ts compiled with the -out flag, so that every .ts will still have a corresponding .js and that .js contains all the required references of it's respective .ts...

In the above example, AllClientsViewModel.js and AllSubscriptionsViewModel.js should be independant files, but both contain ClientModel.js, as they correspond to AllClientsView.html and AllSubscriptionsView.html...

_references.ts would probably work in this scenario, if VS knew how to compile each individual .ts of the project with the -out flag... The TypeScript Build options seem only to allow for one .ts file to have the -out flag applied to it, as opposed to each .ts file having the -out flag applied to it... Unless I've missed something entirely obvious, which is entirely possible ;)
Developer
Jun 26, 2014 at 11:26 PM
The --out flag is specifically, and only, for specifying a single output .js file which all the input .ts files will be compiled into. The behavior you're asking for (one .js per .ts) is the default behavior, which is why --out exists for those who need finer grained control over concatenated outputs. The --out flag is not specified on a per file basis, it applies to a single compilation of many files, which is why it's in the project settings pane in VS.
Jun 27, 2014 at 12:12 AM
Edited Jun 27, 2014 at 12:23 AM
Yep, it's just that it limits you to having one output file for the whole project unless you use a workaround like I posted above. If you have many pages or Views, it would be great to be able to have several .ts files in a project where the -out flag is applied, because each page served up lives in it's own isolated scope much like an executable does. With a larger project, whilst I could have say, an app.ts file which references every other file in the project, you'd have to serve that entire app.js on each page, despite the fact that 90% of what's in that app.js wouldn't be used by the page, whereas if the project file could specify that all files .ts files are transpiled with the -out parameter, one could rest assured that you could reference any .js output file, and it would have all the required resources included.
The behavior you're asking for (one .js per .ts) is the default behavior, which is why --out exists for those who need finer grained control over concatenated outputs.
What I'm asking for is that each .ts -> .js transpilation uses the --out parameter... either way you get a single .js, it's just with --out you get a .js that includes everything it needs. I want that output for each .ts, not just one.

Currently, visual studio can either do
tsc app.ts --out app.js (app.js contains all the files that app.ts references, lets say allAnimals.ts, allAmphibians.ts, allFrogs.ts, animal.ts, amphibian.ts and frog.ts) 
OR
tsc allAnimals.ts
tsc allAmphibians.ts
tsc allFrogs.ts
tsc animal.ts
...
The option I would like to have is one where VS will do
tsc allAnimals.ts --out allAnimals.js
tsc allAmphibians.ts --out allAmphibians.js
...
It means that you could have several related, but different modules within a single project. If my project contained the functionality to do say, run an admin panel and customer interface, whilst I want the admin stuff in the same project because it's using many of the same classes as the customer code, I don't want the admin functionality included in the output that's delivered to a customer...

It seems like a neat (performance impact notwithstanding) way to simplify a build. Any emitted .js file could be included in a page with the guarantee that the .js contains every reference it needs to function.