I'm working on an application built with Brunch. I would like to load some* of the vendor-supplied javascript as modules, so that I can require
them in my code, rather than relying on global variables. Is there some way to do this, without copying all the vendor code into my app
directory?
I tried creating a vendorlib
directory, but brunch doesn't seem to look anywhere bu app
and vendor
. I also tried making a vendor/modules
directory, but brunch seems to not wrap anything found under vendor
(even when I convinced it to combine those files with the files other modules found under app
.)
*The "some" that I'm working on right now are Chaplin, Backbone and Underscore. If I get those to work, I'll move more over later.
You can override config.modules.wrapper
and make it wrap, for example, all files in vendor/modules
directory. Or you can make add more directories that are handled by brunch to config.paths.watched
.
For those following along at home, this is what my config.coffee eventually looked like:
paths:
watched: ['app','vendor','test','vendorlib']
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^vendor/
'test/javascripts/test.js': /^test[\\/](?!vendor)/
'test/javascripts/test-vendor.js': /^test[\\/](?=vendor)/
order:
# Files in `vendor` directories are compiled before other files
# even if they aren't specified in order.before.
before: [
'vendor/scripts/console-polyfill.js',
]
after: [
'test/vendor/scripts/test-helper.js'
]
stylesheets:
joinTo:
'stylesheets/app.css': /^(app|vendor)/
'test/stylesheets/test.css': /^test/
order:
after: ['vendor/styles/helpers.css']
templates:
joinTo: 'javascripts/app.js'
modules:
nameCleaner: (path) ->
path.replace(/^(app|vendorlib)\//, '')
This lets me populate a vendorlib
directory with modules from vendors that support loading as modules. I currently have Chaplin, jQuery, and Backbone in there. I had to rename them not to include the version numbers.