TypeScript bundling and minification?

Question

Assume I have two files

AFile.ts

/// <reference path="ZFile.ts" />
new Z().Foo();

ZFile.ts

class Z
{
    Foo() { }
}

Is there a way to generate all scripts in a single js file in the order it requires (need ZFile before AFile to get the definition of Z)?

Answer 1

In post build events I added a call to TypeScript compiler

tsc "..\Content\Scripts\Start.ts" --out "..\Content\Scripts\all.js"

In the bundle configuration I added

bundles.Add(new ScriptBundle("~/scripts/all").Include("~/Content/Scripts/all.js"));

On the _Layout.cshtml file I added

@Scripts.Render("~/Scripts/all")

And with that I got

<script src="/Scripts/all?v=vsTcwLvB3b7F7Kv9GO8..."></script>

Which is all my script in a single file.

---

The compiler does not minify, you have to use bundles and compile on Release or set

BundleTable.EnableOptimizations = true;

You can also minify using Web Essentials or grabbing the contents and minifing somewhere else.

Answer 2

Now VS Typescript Extension supports merging to one file.
Make sure that you have installed the extension Tools -> Extensions and Updates (VS2015 has it by default)

Go to the project properties and check Combine JavaScript output into file:

Important to have /// <reference /> (as in question), it helps tsc order files by dependencies before the merge.

---

Then for minimisation bundle can be used as usual:

bundles.Add(new ScriptBundle("~/bundles/finale").Include("~/js/all.js"));

and in view

@Scripts.Render("~/bundles/finale")

Answer 3

Use the --out parameter.

tsc AFile.ts ZFile.ts --out single.js

The typescript compiler will do the dependency navigation for you automatically.

Answer 4

Assuming all of your ts files are directly or indirectly under a folder called say 'ts' you could write a tt script which merged all of .js files(but not min.js) into a file myApp.js and all of your min.js files into myApp.min.js.

To obtain the ordering of files you could process subfolders thus:

string[] FolderOrder =
{
    @"libs\utils\",
    @"libs\controls\",
    @"app\models",
    @"app\viewmodels",
    @".",
};