TypeScript ES6 Modules Boilerplate

Update: I’ve officially switched over to Gulp and created a boilerplate generator to make things easier. Check out Slush Project Boilerplate Generator.

—-

I’ve been playing with TypeScript off and on since 2012 (version 0.8) and using ES6 modules seems to be the perfect way to do TypeScript/JavaScript.

In this post I will give you a quick overview how to setup your TypeScript project(s) to work with ES6 Modules. I suggest taking a look at my current TypeScript ES6 Modules Boilerplate after looking at the examples below.

I have two different setups:

  1. Using TypeScript to develop your website/application
  2. Using TypeScript to create a JavaScript library that others can use without TypeScript

TypeScript ES6 Modules Project Setup

TypeScript ES6 Module Sample Class

import AnotherClass from './AnotherClass';

class ExampleClass extends AnotherClass {

    public exampleProperty:string = null;

    constructor() {
        super();
    }

    public exampleMethod():void {
    }

}

export default ExampleClass;

Gruntfile for compiling your TypeScript ES6 Module Code

module.exports = function(grunt) {

    // Intelligently lazy-loads tasks and plugins as needed at runtime.
    require('jit-grunt')(grunt)();

    // -- Configuration --------------------------------------------------------
    grunt.initConfig({

        browserify: {
            buildTypeScript: {
                options: {
                    preBundleCB: function(bundle) {
                        bundle.plugin('tsify', {
                            removeComments: true,
                            noImplicitAny: false,
                            target: 'ES5'
                        });
                    },
                    // sourcemaps
                    browserifyOptions: {
                        debug: true
                    }
                },
                files: {
                    'web/assets/scripts/main.js': ['src/assets/scripts/main.ts']
                }
            }
        }

    });

    grunt.registerTask('default', [
        'browserify:buildTypeScript'
    ]);

};

NPM package.json for node modules used for the Gruntfile build

{
    "name": "Example",
    "version": "1.0.0",
    "browser": {
        "jquery": "./src/assets/vendor/jquery/dist/jquery.js"
    },
    "browserify-shim": {
        "jquery": "global:$"
    },
    "browserify": {
        "transform": [
            "browserify-shim"
        ]
    },
    "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-browserify": "^4.0.1",
        "browserify-shim": "^3.8.11",
        "tsify": "^0.12.2",
        "jit-grunt": "^0.9.1"
    }
}

TypeScript ES6 Modules Library Setup

I maintain a library of code called StructureJS. I use the TypeScript library to generate the JavaScript one so that I only have one codebase. I suggest using grunt-ts and the umd module setting.

ts: {
    default: {
        src: ['ts/**/*.ts'],
        outDir: 'js/',
        options: {
            target: 'es5',
            module: 'umd',
            basePath: '',
            sourceMap: false,
            declaration: false,
            nolib: false,
            comments: true
        }
    }
}

You can see the actual usage here:
https://github.com/codeBelt/StructureJS/blob/master/Gruntfile.js

2 Responses to “TypeScript ES6 Modules Boilerplate”

  1. Sandeep Says:
    May 10, 2016 at 6:51 am

    Hi Robert,

    Great tutorials for typescript. It really helpful to developers. By the way i am facing problem when i am doing Typescript-ES6 sample project. It is showing error like require is not defined. Can you please look at https://github.com/Sandeepvedam/TypeScript-Starter-ES6

    Please provide your contribution or valuable suggestions. Much appreciated on your help.

    Thanks,
    Sandeep.

Leave a Reply