TypeScript Build Tools

Build tools are software utilities designed to facilitate the automation of converting and packaging our source code into a unified file. A build tool is employed to create a new iteration of a program. The process of building encompasses compiling, linking, and assembling the code into an executable format.

Build tools are typically executed via the command line, whether integrated within an IDE or functioning independently.

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 smaller projects, software developers trigger the build process manually, which is not advisable for larger projects. This is due to the difficulty in managing the build requirements, the proper sequence, and the dependencies involved in the building process within larger projects. Therefore, we employ an automation tool to ensure that the build process remains more consistent.

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

• ✅ Browserify
• ✅ Grunt
• ✅ Gulp
• ✅ Jspm
• ✅ Webpack

1. Browserify

Utilize the Tsify plugin for Browserify to compile TypeScript files.

Install

Install Tsify by using the following command:

$npm install Tsify

Using Command Line Interface

Utilize the command below to compile your code, directing the output to a file titled bundle.js.

browserify main.ts -p [ tsify --noImplicitAny ] > 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

Utilize the subsequent command to install the Duo plugin:

$npm install duo-typescript

Using Command Line Interface

Utilize the command below to compile your code, directing the output to a file titled entry.ts.

$duo --use duo-typescript 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

Utilize the grunt-ts plugin within Grunt to compile TypeScript files.

Install

Install grunt-ts by using the following command:

$npm install grunt-ts

At this stage, it is necessary to add the Grunt configuration file, titled gruntfile.js, to 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

Utilize a gulp-typescript plugin to compile TypeScript files.

Install

To install gulp-typescript, execute the command below:

$npm install gulp-typescript

At this point, it is necessary to incorporate the Gulp configuration file, designated as gulpfile.js, into 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:

$npm install -g jspm@beta

Note: Currently TypeScript support in jspm is in 0.16beta

6. Webpack

Utilize the ts-loader plugin for the compilation of TypeScript files.

Install

Install webpack by using the following command:

$npm install ts-loader --save-dev

At this point, it is essential to incorporate the Webpack configuration file identified as webpack.config.js into 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" }
        ]
    }
}