Using browserify with typescript to include a node module

Question

I'm attempting to use a node module in a typescript application and I've included it in my TypeScript code via require().

I build my typescript to JS and all works well if I run it through node which is great.

I'm looking for a way to use the same code and run it through the browser. Browserify seemed like a sensible solution.

I popped a post build action on my VS project and I'm building a 206KB file via browserify (so it's certainly doing something!). Unfortunately my tiny bit of Typescript doesn't seem to be accessible when it's been browserified. I'm not that familiar with what browserify should be generating so not quite sure whether what it's wrapped my .js code in is correct (can post snippets if it helps).

So my question is twofold really, I'm looking for the answer to either:

Is there a recommended way to write TypeScript post 0.9 to allow it to be run after it's been browserified?
Is there a way to simple tell TypeScript to pull in the 'require' dependency on its own?

Any thoughts or info in this area would be greatly appreciated.

EDIT:

Just to clarify, I'm generating my .js from the .ts during save/build, and in a post build action, pointing browserify to the output. An abridged js output looks like this:

var TestModule;
(function (TestModule) {
    function launchDrone() {
        var exports = require('ar-drone');
        var client = exports.createClient();
    }
})(TestModule || (TestModule = {}));

When I generate the browserified file from that, I can't access TestModule or launchDrone in any context (or certainly not from window. ) is there some trick to accessing the browserified code?

browserify puts all the referenced js files into one file. it won't render the js. you'll likely need to add a step to turn typescript into js before browserifying it. — J.Wells
– J.Wells, Commented May 8, 2014 at 18:10
Yeah I'm doing that already, my .js file is generated and that's what I'm pointing browserify at — dougajmcdonald
– dougajmcdonald, Commented May 8, 2014 at 18:13
Ah - gotcha now. Are there any errors in the console? Have you tried prefixing your individual scripts with ;? — J.Wells
– J.Wells, Commented May 8, 2014 at 18:18
I'm not getting any errors as far as I can see (VS is usually quite noisy, I'll run the post build command manually and let you know if I see anything, one tick) — dougajmcdonald
– dougajmcdonald, Commented May 8, 2014 at 18:25
Nope, no errors at all, here's what I'm using as a build action "browserify e:\nodejs\myproject\app.js -o e:\nodejs\myproject\bundledapp.js" should I be using any other params for browserify? I only pick that up from some online example — dougajmcdonald
– dougajmcdonald, Commented May 8, 2014 at 18:26

wjohnsto · Accepted Answer · 2014-05-12 19:06:41Z

3

It looks like you potentially are not exporting TestModule? Your TestModule file should look like this:

module TestModule {
    export function launchDrone() {
        var exports = require('ar-drone');
        var client = exports.createClient();
    }
}
export = TestModule;

This way you should be able to launch TestModule and TestModule.launchDrone from the window.

answered May 12, 2014 at 19:06

wjohnsto

4,5032 gold badges16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dougajmcdonald Over a year ago

Interesting, I'll have a look at this tonight. I believe by changing some of the module options I can get the export = TestModule line to generate, but this didn't seem to help when I did it.

Collectives™ on Stack Overflow

Using browserify with typescript to include a node module

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related