DevTut

# Integrating with Build Tools

# Browserify

# Install

npm install tsify

# Using Command Line Interface

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

More details: smrq/tsify (opens new window)

# Webpack

# Install

npm install ts-loader --save-dev

# Basic webpack.config.js

# webpack 2.x, 3.x

module.exports = {
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                // Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
                test: /\.tsx?$/,
                loaders: ['ts-loader'],
                exclude: /node_modules/
            }
        ]
    },
    entry: [
        // Set index.tsx as application entry point.
        './index.tsx'
    ],
    output: {
      filename: "bundle.js"
    }
};

# webpack 1.x

See more details on ts-loader here (opens new window).

Alternatives:

# Grunt

# Install

npm install grunt-ts

# Basic Gruntfile.js

More details: TypeStrong/grunt-ts (opens new window)

# Gulp

# Install

npm install gulp-typescript

# Basic gulpfile.js

# gulpfile.js using an existing tsconfig.json

More details: ivogabe/gulp-typescript (opens new window)

# MSBuild

Update project file to include locally installed Microsoft.TypeScript.Default.props (at the top) and Microsoft.TypeScript.targets (at the bottom) files:

More details about defining MSBuild compiler options: Setting Compiler Options in MSBuild projects (opens new window)

# NuGet

  • Right-Click -> Manage NuGet Packages
  • Search for Microsoft.TypeScript.MSBuild
  • Hit Install
  • When install is complete, rebuild!

More details can be found at Package Manager Dialog (opens new window) and using nightly builds with NuGet (opens new window)

# Install and configure webpack + loaders

Installation

npm install -D webpack typescript ts-loader

webpack.config.js

module.exports = {
  entry: {
    app: ['./src/'],
  },
  output: {
    path: __dirname,
    filename: './dist/[name].js',
  },
  resolve: {
    extensions: ['', '.js', '.ts'],
  },
  module: {
    loaders: [{
      test: /\.ts(x)$/, loaders: ['ts-loader'], exclude: /node_modules/
    }],
  }
};

# Remarks

For more information you can go on official web page typescript integrating with build tools (opens new window)

← Using Typescript with RequireJS →