Browserify + TypeScript

browserify, gulp, typescript

Solution

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

Problem

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.

Original source