Gulp + Browserify + Jquery + Bootstrap

Question

I'm trying to load jquery + jquery-ui + bootstrap inside my project throught NPM and gulp.

My configuration is this:

Package.json

"browser": { "jquery": "/node_modules/jquery/dist/jquery.js", "jquery-ui": "/node_modules/jquery-ui-browserify/jquery-ui.js" }, "browserify-shim": { "jquery": "$", "jquery-ui": { "exports": "jquery-ui", "depends": [ "jquery:jQuery" ] } }, "browserify": { "transform": [ "browserify-shim" ] }, "dependencies": { "bootstrap": "^3.3.6", "jquery": "2.1.0", "jquery-ui-browserify": "^1.11.0-pre-seelio", }

gulpfile.js

gulp.task('browserify', function(){ return browserify([ 'node_modules/jquery/dist/jquery.js', 'node_modules/jquery-ui-browserify/dist/jquery-ui.js', 'node_modules/bootstrap/dist/js/bootstrap.js', ]) .bundle() .pipe(source('core.js')) .pipe(buffer()) .pipe(gulp.dest('build/js')); });

Then I load core.js with assetic from my index.php but I get this error:

Uncaught ReferenceError: jQuery is not defined

What am I doing wrong?

Thank you.

Maybe jquery-browserify solves the problem npm install jquery-browserify --save. Worked for me. — 1w3j
– 1w3j, Commented Mar 4, 2017 at 3:51
You can even install these two packages jquery and jquery-ui-browserify. — 1w3j
– 1w3j, Commented Mar 4, 2017 at 4:23

user4401761 · Accepted Answer · 2016-07-01 10:22:34Z

I don't know what you're trying to do there but keep in mind that what you should pass to the browserify instance is the entry point of your application, not your dependencies.

Then in your application you can use the require function to load those dependencies:

var $ = require('jquery');

While compiling browserify will autonomously do two things for you:

He will put into your bundle any library you required.
He will resolve your require statements by replacing them with a reference to the bundled copy of that library.

As long as the library is installed through npm you don't need any additional configuration. On the other hand if the library is situated in an unconventional location you'll need to tell browserify how to resolve it.

Anyway you can find more documentation on the repo's readme

Collectives™ on Stack Overflow

Gulp + Browserify + Jquery + Bootstrap

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related