I'm working on a client-side project using different dependencies (such as page, superagent, vue). To optimize my grunt-browserify task speed, I would like to create a bundle containing all these dependencies, in one file, such as lib.js. My source will be compiled in app.js. And then I guess I will have to concat both into my build.js. With this setup, grunt will only have to update the app.js and build.js), not the lib.js. That also means that for each dependency included in the lib.js I can still require(dep).
I've read some stuf about it but I can't manage to make it work.
My current browserify task is:
browserify: {
dev: {
files: {
'build/app.js': ['src/**/*.js', 'src/**/*.html']
},
options: {
debug: true,
external: ['vue', 'superagent', 'page']
}
}
}
and I've tried adding something like that without success:
browserify: { // the dev target is still there
lib: {
files: {
'build/lib.js': ['vue', 'superagent', 'page']
}
}
}
I know it doesn't work because my files object is not correct, however I do not know how to automatically get the main file of each dependeny.
Any help would be appreciated. Thanks !
I finally figured how to do it for bower components (haven't tested yet for npm modules).
First, the libs browserify task (using TweenMax for the example) :
libs: {
files: {
'build/public/libs.js': ['bower_components/greensock/src/minified/TweenMax.min.js']
},
options: {
shim: {
TweenMax: {
path: 'bower_components/greensock/src/minified/TweenMax.min.js',
exports: 'TweenMax'
}
}
}
}
Then the application task:
dev: {
files: {
'build/public/desktop/desktop.js': ['src/desktop/**/*.js']
},
options: {
external: ['TweenMax']
}
}
It's important to make shims or aliases for each library. When I first tried to make an external bundle, I was using several browserify transforms (such as debowerify/deglobalify) that were interfering with the external thing.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments