Browserify + TypeScript

Question

Good day everyone.

I try to build my web project with Gulp. I want use TypeScript and I want ruling dependencies with browserify.

But I have some trouble with it.

I use next code for build:

var path = {
    build: {
        js: 'build/js/',
    },

    src: {
        ts: './src/ts/*.ts',
    },

};

gulp.task("ts:build", function(){
    glob(path.src.ts, {}, function(err, files){
        var b = browserify({
            cache: {},
            packageCache: {},
            debug: true
        });

        _.forEach(files, function(file){
            b.add(file);
        });

        b.plugin('tsify', { noImplicitAny: true })
            .bundle()
            .pipe(source('app.js'))
            .pipe(gulp.dest(path.build.js))
        });    
    });
});

I can't understand how I must declare dependencies. For example, I have two *.ts file: main.ts and someclass.ts. In someclass.ts I write some class:

class SomeClass {
    // bla-bla-bla
}

export = SomeClass;

And I want to use this class in main.ts. I try this with browserify:

var settingsPanel = require("./someclass");

gulp build have worked correctly, but in browser console I see

node_modules\browserify\node_modules\browser-pack_prelude.js:1Uncaught Error: Cannot find module './someclass';

I will be very helpfull for any advice about this. Especially for link on some code example with gulp+browserify+typescript.

Answer 1

I'm just working on a really similar build at the moment.

In my build, I have one task for compilation from TS to JS using commonjs modules. In your gulpfile.js, when you compile your TS into JS you need to indicate to the compiler to use commonjs modules:

var tsProject = ts.createProject({
    removeComments : true,
    noImplicitAny : true,
    target : 'ES3',
    module : 'commonjs', // !IMPORTANT
    declarationFiles : true
});

I have a second task which indicates the application JS entry point (main.js) to Browserify and it will then generate the bundle file, uglify it and generate source maps.

My main.ts file contains the folowing:

///<reference path="./references.d.ts" />

import headerView = require('./header_view');
import footerView = require('./footer_view');
import loadingView = require('./loading_view');

headerView.render({});
footerView.render({});
loadingView.render({});

My gulpfile.js looks like this (please note I only copied the relevant parts here)

// ....

var paths = {
  ts : './source/ts/**/**.ts',
  jsDest : './temp/js/',
  dtsDest : './temp/definitions/',
  scss : './source/scss/**/**.scss',
  scssDest : './temp/css/',
  jsEntryPoint : './temp/js/main.js',
  bowerComponents : './bower_components',
  nodeModules : 'node_modules',
  temp : './temp',
  dist : './dist/'
};

var tsProject = ts.createProject({
    removeComments : true,
    noImplicitAny : true,
    target : 'ES3',
    module : 'commonjs',
    declarationFiles : true
});

// Build typescript

gulp.task('tsc', function(){
  var tsResult = gulp.src(paths.ts).pipe(ts(tsProject));
  tsResult.dts.pipe(gulp.dest(paths.dtsDest));
  tsResult.js.pipe(gulp.dest(paths.jsDest));
});

// Browserify, uglify and sourcemaps

gulp.task('minify-js', function () {
  // transform regular node stream to gulp (buffered vinyl) stream
  var browserified = transform(function(filename) {
    var b = browserify({ entries: filename, debug: true });
    return b.bundle();
  });

  return gulp.src(paths.jsEntryPoint)
    .pipe(browserified)
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.dist));
});

// ....

The full source code (work in progress) is available at https://github.com/remojansen/modern-workflow-demo