budo
budo copied to clipboard
[feature] Multiple Bundles
Maybe there is an easier way to facilitate multiple demos in a single project with budo.
Say your project has two demos: "simple" and "advanced." You would need a script for each one:
"scripts": {
"simple": "budo src/simple.js --dir static -- -t babelify | garnish",
"advanced": "budo src/advanced.js --dir static -- -t babelify | garnish"
}
For publishing, you may (or may not) choose to use factor-bundle to reduce duplicate bytes being sent to the user as they navigate through the different demos.
Or imagine a project like ThreeJS, which has dozens of demos that all run using a common codebase. Something like this would be ideal:
npm run demo simple
npm run demo advanced
# builds all demos for static gh-pages
npm run build
In the past, I've used some (unix) shell scripts to reduce a bit of duplication in my package.json: https://github.com/mattdesl/webgl-lines
It's tricky since you can't really pass arguments to a npm run script in the way we need (i.e. before any -- browserify options, garnish, etc). There are some tricks like this but I'm not sure it's a great solution.
Maybe there is a way to tie this in with #60 and #92.
Different but interesting approach: https://github.com/spencer-leopold/mundler
You can do:
"scripts": {
"demo": "budo src/$1 --dir static -- -t babelify | garnish"
}
And then
$ npm run demo -- simple
$ npm run demo -- advanced
And an extended version that has a default:
"scripts": {
"demo": "[ $1 ] && s=$1 || s=simple; budo src/$s --dir static -- -t babelify | garnish"
}
In addition to a project with multiple demo apps, there is the following scenario that requires multiple bundles:
The developer is making a large application with many different sections, and wants to have one bundle for the entry-point and multiple bundles for the multiple sections, to be lazy-loaded when they are needed.
What about the case for webworkers? I just switch back to beefy in these cases. I find multiple bundles nicer that using webworkify inside the code.