CODEWITHSUNDEEP
typescriptgulpbrowserifybundling-and-minification
Will Comeaux
Will Comeaux

Reputation: 365

Bundling separate vendor file with gulp+browserify

UPDATE 1

I am getting closer but still having an issue with some modules. Specifically, I am trying to include Morris.js (morris.js06) package.

I now have my gulp seeming able to generate separate app and vendor packages. JQuery, Bootstrap, etc are all referenced externally. But there are some packages that still don't seem to work.

In my app typescript file, I have this.

import "raphael";
import { Morris } from "morris.js06";

In gulp I am bundling it like this.

var bundler = browserify({
            entries: ['wwwroot/scripts/App.ts'],
            cache: {},
            packageCache: {}
        });
        packageReferencesArray.forEach(function (packageReference) {
            console.log('Excluding ' + packageReference.packageName);
            bundler.exclude(packageReference.packageName);
            bundler.external(packageReference.packageName);
        });

        bundler.external('Morris');

When I look at the output file, I see this.

enter image description here

In the browser, that doesn't exist. Should that just be Morris.Area instead of morris_js06.Morris.Area? I can also see that Morris IS defined. It's like browserify is not adhering to the .external comand?

END UPDATE 1

END UPDATE 1

I am developing an Orchard Core theme that intends to bundle some core modules that can be used by other modules.

Example, I want the theme module to include bootstrap and jquery - when the theme is applied, then any other module should be able to use $ from jquery. The module should have a tag for my theme.vendor.js file (which I am trying to create with gulp+browserify).

I am currently trying a Vendor.ts file that does this:

import $ from "jquery";
import "bootstrap";

I also have a Main.ts file that does something like this

import $ from "jquery";
$(document).ready... //The rest is not relevant to this post

My gulp file has two tasks. One to create the vendor bundle and one to create the module/theme bundle.

I see both bundles are created but in the browser I see things like this: enter image description here

I see this for various external things I am including. It also seems like some of the packages I am using calling "jQuery" as opposed to "jquery" or "$"

How do I setup my gulp+browserify task to generate a vendor.js file that properly bundles and exposes this stuff in the browser?

Here is my gulp vendor bundle task.

gulp.task('create-vendor-bundle-js', function (cb) {
    var bundler = browserify(
        {
            entries: ['wwwroot/scripts/Vendor.ts'],
            cache: {},
            packageCache: {},
        });

    bundler.plugin(tsify).plugin(errorify)
        .bundle()
        .pipe(source('vendor.bundle.js'))
        .pipe(gulp.dest('wwwroot/bundles/js'));

    return cb();
});
enter code here

Is there something in the browserify api that lets me export $ from the bundle? Or am I just doing this ALL wrong? I have looked at other SO related questions and have done TON of Googling+reading, nothing yet has worked the way I want.

TIA!

Upvotes: 0

Views: 46

Answers (1)

Will Comeaux
Will Comeaux

Reputation: 365

Update: I have since moved away from Gulp and into using WebPack where I was able to accomplish this task.

Upvotes: 0

Related Questions