words

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.

Last updated: