gulp-browserify module alias like in RequireJS
So you have this in one of your components:
//main.coffee
$ = require 'jquery'
R = require './../../vendor/ractive/Ractive.js'
console.log 'Ractive', R.VERSION
// More code..
Our problem is with R = require './../../vendor/ractive/Ractive.js'
which is ugly. So you would like to make it more lovely without exposing the lib into global namespace. With Gulp you can have it in a really weird way.
//Gulpfile.js
gulp.task('coffee', function () {
var config = {
debug: false,
extensions: ['.coffee','.js'],
insertGlobals : true,
transform: ['coffeeify'],
shim: {
console: {
path: './vendor/console-polyfill/index.js',
exports: 'window'
},
jquery: {
path: './vendor/jquery/dist/jquery.min.js',
exports: '$'
}
}
};
var bundle = gulp.src('./src/coffee/main.coffee', {
read: false
})
return bundle
// Here is the magic
.pipe(plugins.browserify(config).on('prebundle', function(bundler){
bundler.require('./vendor/ractive/Ractive.js', { expose: 'Ractive' });
/*
* If you won't use jquery plugins and you don't need it in window.$:
*/
//bundler.require('./vendor/jquery/dist/jquery.min.js', { expose: 'jquery' });
}))
.pipe(plugins.rename('bundle.js'))
.pipe(gulp.dest('./dist/scripts'))
.pipe(plugins.connect.reload());
});
Now you can:
//main.coffee
$ = require 'jquery'
R = require 'Ractive'
console.log 'Ractive', R.VERSION
// More code..
Afaik gulp-browserify is going to be rewritten as this feature should be available in browserify’s config, near transforms
and shim
.