Combining modules with TypeScript

  • Gérald Barré

In the previous post, I showed how to use TypeScript modules to create small units of independent and reusable code. Creating small modules is very great. However, at runtime, you may want to download only 1 file instead of tens of files. The solution is to combine all your files into one.

To combine files, you can use a tool such as UglifyJS or just concat files basically. If you use AMD or System modules, you can configure TypeScript to output a single files with all your modules. Open the tsconfig.json file and set outFile:

    "compilerOptions": {
        "module": "system",
        "outFile": "file.js"

The output file will contains all your modules in file.js:

System.register("math", [], function (exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 &&;
    function add(a, b) {
        return a + b;
    exports_1("add", add);
    return {
        setters: [],
        execute: function () {// file math.ts
System.register("main", ["math"], function (exports_2, context_2) {
    "use strict";
    var __moduleName = context_2 &&;
    var math_1;
    return {
        setters: [
            function (math_1_1) {
                math_1 = math_1_1;
        execute: function () {
            console.log(math_1.add(1, 2));

Then you can include this file into your code. As we know we'll load the file, we can include it directly in the page in addition to SystemJS. Then, you still have to load the main module using SystemJS:

<script src="" integrity="sha256-HCJlhCZ21EKx0Wo6wCF+rbeBHlVlOSJccd4zTQe2TNw=" crossorigin="anonymous"></script>
<script src="file.js"></script>
// Load the main module

This solution is very convenient if you don't want to set up a complex build workflow.

Do you have a question or a suggestion about this post? Contact me!

Follow me:
Enjoy this blog?Buy Me A Coffee