TypeScript Build Tools

Build tools are programming utilities which help to automate the transformation and bundling of our source code into a single file. A build tool utility is used to build a new version of a program. Building means compiling, linking, and packaging the code into the executable form.

The Build tools are usually run on the command line, either in IDE or completely separate from it.

Build tools or build automation is the act of scripting or automating a variety of tasks that developers do in their day-to-day activities. These are:

Downloading dependencies.
Compiling source code into binary code.
Packaging that binary code.
Running tests.
Deployment to production systems.

Use of build tools

In small projects, the software developers manually invoke the build process, which is not a good practice for larger projects. It is because, in larger projects, it is very hard to keep track of what needs to be built, in what sequence and what should be the dependencies in the building process. So we use an automation tool which allows the build process to be more consistent.

Some of the standard build tools that can be integrated with TypeScript are:

Browserify
Duo
Grunt
Gulp
Jspm
Webpack

1. Browserify

Use the Browserify plugin Tsify for compiling TypeScript files.

Install

Install Tsify by using the following command:

Using Command Line Interface

By using the following command, compile your code that saves the result in a file named bundle.js.

Using API

var browserify = require("browserify");
var tsify = require("tsify");

browserify()
    .add("main.ts")
    .plugin("tsify", { noImplicitAny: true })
    .bundle()
    .pipe(process.stdout);

2. Duo

Install

Install the Duo plugin by using the following command:

Using Command Line Interface

By using the following command, compile your code that saves the result in a file named entry.ts.

Using API

var Duo = require("duo");
var fs = require("fs")
var path = require("path")
var typescript = require("duo-typescript");

var out = path.join(__dirname, "output.js")

Duo(__dirname)
    .entry("entry.ts")
    .use(typescript())
    .run(function (err, results) {
        if (err) throw err;
        // Write compiled result to output file
        fs.writeFileSync(out, results.code);
    });

3. Grunt

Use grunt-ts plugin from Grunt for compiling TypeScript files.

Install

Install grunt-ts by using the following command:

Now, you need to include the Grunt config file named gruntfile.js in your project.

module.exports = function(grunt) {
    grunt.initConfig({
        ts: {
            default: {
                src: ["**/*.ts", "!node_modules/**/*.ts"]
            }
        }
    });
    grunt.loadNpmTasks("grunt-ts");
    grunt.registerTask("default", ["ts"]);
};

4. Gulp

Use a gulp-typescript plugin for compiling TypeScript files.

Install

Install gulp-typescript by using the following command:

Now, you need to include the Gulp config file named gulpfile.js in your project.

var gulp = require("gulp");
var ts = require("gulp-typescript");

gulp.task("default", function () {
    var tsResult = gulp.src("src/*.ts")
        .pipe(ts({
              noImplicitAny: true,
              out: "output.js"
        }));
    return tsResult.js.pipe(gulp.dest("built/local"));
});

5. Jspm

Use jspm plugin for compiling TypeScript files.

Install

Install jspm by using the following command:

Note: Currently TypeScript support in jspm is in 0.16beta

6. Webpack

Use ts-loader plugin for compiling TypeScript files.

Install

Install webpack by using the following command:

Now, you need to include the Webpack config file named webpack.config.js in your project.

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js"
    },
    resolve: {
        // Add '.ts' and '.tsx' as a resolvable extension.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    }
}

Next TopicMigrating from JavaScript to TypeScript

← prev next →