How do you load typescript modules from node_modules using browserify?

Question

When I run tsc, everything runs perfectly fine. However, I cannot understand how you are meant to import other typescript modules from node modules.

This is the important part of my gulp file:

gulp.task('compile-ts', ['clean'], function(){
  var sourceTsFiles = [
    config.allTs,
    config.typings
  ];

  var bundler = browserify({
    basedir : "src",
    debug : true})
    .add("app.ts")
  //.add("typings/tsd.d.ts")
  .plugin(tsify);

  return bundler.bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("build"))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write({includeContent: false, sourceRoot: 'src'}));

});

When I use,

import {DataRepository, List} from "tsmvc";

Where tsmvc is a typescript module node module, I get cannot find module tsmvc. Atom doesn't complain and shows me intellisense, tsc doesn't complain, but tsify does. Can anyone point me to a gulp file doing something similar or explain the process?

Here's the github repo: https://github.com/Davste93/typescript-mvc-consumer/blob/master/gulpfile.js

Seems to be the issue described here: https://github.com/TypeStrong/tsify/issues/60 - can't understand what the resolution was there though. — Sergiu Paraschiv, Feb 29 '16 at 18:54

score 1 · Answer 1 · answered Aug 08 '16 at 08:47

Prior to version 0.15.3 of tsify, it was not possible to import TypeScript files from within node_modules.

Internally, the tsify plugin creates a transform and Browserify does not transform files under node_modules for non-global transforms. In version 0.15.3 of tsify, the global option was added and can be specified as follows:

var bundler = browserify({
    basedir: "src",
    debug: true
})
.add("app.ts")
.plugin(tsify, { global: true });

How do you load typescript modules from node_modules using browserify?

1 Answers1