I want to combine bootstrap.js & jquery.js (both installed with npm) into vendors.js file but still be able to use jquery by calling require('$')
.
So I created gulp task:
'use strict';
var gulp = require('gulp'),
helpers = require('./../utilities/gulp-helpers'),
source = require('vinyl-source-stream'),
plumber = require('gulp-plumber'),
browserifyShim = require('browserify-shim'),
browserify = require('browserify');
gulp.task('bulld-frontend:vendors', function(done) {
var build = browserify({
entries: [
'jquery',
'bootstrap'
]
});
build
.transform(browserifyShim)
.require('jquery')
.bundle()
.pipe(source('vendors.js'))
.pipe(gulp.dest('build/public/js'))
.pipe(plumber({
errorHandler: helpers.logError
}));
done();
});
then added configuration to package.json
"browser": {
"bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
"jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": "./gulp/utilities/shim-config.js",
},
and finally configure my shims in gulp/utilities/shim-config.js
'use strict';
module.exports = {
'jquery' : '$',
'bootstrap' : { 'depends': { 'jquery': 'jQuery'} }
};
but after running task I receive file, where bootstrap goes prior to jquery, so it throws Uncaught Error: Bootstrap's JavaScript requires jQuery
I added
"browserify": {
"transform": [
"browserify-shim"
]
}
to package.json but it didn't help. It seems to me, that browserify never applies this transformation, because if I replace .transform(browserifyShim)
with .transform(function() { throw new Error("OLOLO"); })
task is still working.
I used browserify and shims in wrong way.
Fist, .transform(browserifyShim)
is not needed and this is wrong syntax to call transformations from code at all.
Second, transformation is working fine, all I needed were just create vendors.js file and require bootstrap in it with require('bootstrap')
. Then specify vendors.js as entry point of bulld-frontend:vendors task:
var build = browserify({
basedir: 'sources/client/js'
entries: [
'./vendors.js'
]
});
and it is working.