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)?

score 14 · Answer 1 · answered Jun 30 '13 at 00:47

14

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.

answered Jun 30 '13 at 00:47

BrunoLM

97,872
84
296
452

How do you stop it from automaticly compiling on save? Do yo have to specify each file or can we use wildcards? – formatc Feb 19 '14 at 13:26
You can use `IncludeDirectory()` to include all the files :-) See also : http://stackoverflow.com/questions/12926830/typescript-compiling-as-a-single-js-file – Simon_Weaver May 22 '14 at 23:48
Is it wrong in the bundle to have .Include("~/Content/Scripts/all.ts")); ? – Revious Nov 12 '14 at 12:54

score 10 · Accepted Answer · answered Nov 07 '15 at 11:35

10

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")

answered Nov 07 '15 at 11:35

Artur A

7,115
57
60

Will this also work with other module types like System? Is it possible to use this instead of module loaders like webpack or babel, ie. node packages? – KKS Aug 01 '16 at 15:53
This UI is disabled on my machine. Any idea why? – user2173353 Feb 07 '18 at 13:41
Also, this builds JS files form TS files during Build. Isn't there a way to do this on the fly with a bundle configuration? :^) – user2173353 Feb 07 '18 at 13:55

basarat · Answer 3 · 2013-06-29T23:14:01.010

4

Use the --out parameter.

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

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

edited Jun 29 '13 at 23:14

answered Jun 29 '13 at 23:04

basarat

261,912
58
460
511

score 2 · Answer 4 · answered Jun 30 '13 at 16:33

2

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",
    @".",
};

answered Jun 30 '13 at 16:33

andyks

478
1
5
9

What's a tt script? – Richard Garside Jun 01 '16 at 10:51

TypeScript bundling and minification?

4 Answers4