CODEWITHSUNDEEP
npmgulpbrowserifybrowserify-shim
Ijuhash
Ijuhash

Reputation: 137

Gulp + Browserify + Jquery + Bootstrap

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.

Upvotes: 0

Views: 1820

Answers (1)

user4401761
user4401761

Reputation:

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:

  1. He will put into your bundle any library you required.
  2. 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

Upvotes: 2

Related Questions