Expose $ and jQuery to global scope with Typescript, Browserify and Gulp

Question

How do I make a bundle file that puts $ and jQuery in the window/global scope so that other bundles can see it?

I am trying to expose JQuery and Bootstrap from a common vendor file. I want my Layout.cshtml to have a single tag to include the bundle and it be available to any page. Project is using Typescript, Browserify and Gulp.

I know how to make the dependent bundle files import and use $/jQuery externally (not included in the bundle). What I can't get is the vendor bundle to actually expose the $ and jQuery properly.

Things I have tried: I wrote this other (long) post with a bunch of details - but asking what I think is the wrong question. This post/question is shorter and more focused to, hopefully, get a response. Bundling separate vendor file with gulp+browserify

• LOTS of googling and experimenting with browserify-shim, globalThis, this site: https://weblog.west-wind.com/posts/2016/Sep/12/External-JavaScript-dependencies-in-Typescript-and-Angular-2, and a bunch of other stuff. No luck so far.

Thanks for any help!

Answer 1

Not a formal answer, but I have since moved away from Gulp and into Webpack where I was able to get this to work with relative ease.