-
-
Notifications
You must be signed in to change notification settings - Fork 87
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Building multiple bundles #40
Comments
I'm sorry you are running into trouble, this is indeed a use case I haven't thought of. Since only a single config is supported right now it wouldn't know what part of it to apply to which bundle. Possibly we could allow a way to supply multiple configs? ala: {
"browserify-shim": {
"@bundle-foo": {
"angular": "global:angular"
},
"@bundle-foo": {
"./vendor/jquery": "$"
}
} It would be very helpful if you could create a sample project on github and note in the readme how you would like it to work and what it does instead. |
What if I manually run the browserify-shim transform? Could you pass the config that way? |
That would be another option, but is not possible ATM. That's why a sample project to play with in order to figure this out would be very helpful and much appreciated. |
Not sure what to put in a sample project. It's pretty much just browserify with multiples bundles. That's described in a bunch of places, including here. Only difference is most examples use grunt-browserify with its |
I should add that so far, browserify-shim has served me quite well (thanks for that 😄). It just can't split my source up into multiple browserify bundles, which seems to be standard operating procedure for browserify once your code grows to a certain size. |
Just put the minimum of code that reproduces your problem.
yeah, but if you supply me with a working repro case it'll be much easier for me to get started trying to figure out how to solve your problem |
Here you go. This is a sample project that uses browserify-shim to shim angular and angular-resource. For another potential monkey wrench, angular depends on jquery, which is already a CommonJS module. Currently, all JS in this sample is bundled into |
That is a good start, but I'm still waiting for you to add the actual build script you are using to the repo. An empty Ideally everything is prepared and I can repro the problem with one simple command, i.e. Thanks. |
I apologize if I'm wasting your time. That's not my intention and I appreciate your taking the time to implement this. I skipped the gulpfile because it's not needed to run browserify, that's handled by browserify-middleware at runtime. You could of course, do it in the build instead, but I just copied my current setup. If you want a test case, well I'm not sure what the API for this feature should be, since it's apparently not implemented. For example, should |
All I need actually is the build script you are running so I can see why it fails. Just allow me to do something similar to the below to see the problem: git clone your/reprocase && cd reprocase
npm install
npm test Thanks. |
Gotcha. So you don't need like a full-on Karma test? Just enough to open a browser and get an error? |
Exactly! |
No worries. I just updated the repo. The original commit is with everything working using a single bundle. The second commit tries to move the libs into a separate bundle. The weird thing is, it looks like it's working now. Using I'll have to do some digging to see why it doesn't work on my other project. Maybe something about the specific deps it's using. |
OK. It looks like it's currently complaining about d3 not being defined. I added a few more deps to the sample project to showcase this. You can run it with |
Thanks will have a look in conjunction with the other issue I linked above. |
Hey @gabegorelick, not to hijack this thread and steer it away from Here's an example of my tasks (it's from a
The two outputted files can then be included in your HTML page:
Note that this doesn't use the shim at all; instead, it functions by synchronously
If you actually NEED the shim for one reason or another, this might not be an option, but for most client-side libs without many dependencies, it works great, and might at least give you a starting place. |
@jkymarsh Thanks for that. I considered doing something similar. The only problem, which you alluded to, is that it doesn't integrate browserify-shim. I could live with
although it's obviously not as nice as what browserify-shim gives you with As an aside, I don't think you need |
Yeah, you're absolutely right about it requiring manual ordering of the It's a real shame; the shim situation with Browserify has frustrated me to the point where I might have to drop back to my old requirejs setup. I'm sure we all appreciate your work on the shim, @thlorenz, but it just doesn't seem like it's quite there yet, especially considering the grunt and gulp integrations, as well as the shim, keep updating and altering the way they integrate, making it difficult to use the newest versions. Noted on the use of |
Depends on what there means for you @jkymarsh, but this is the first time that multi bundle shimming came up, so therefore also the first chance to get it fixed. However the fact that it didn't come up before makes me think that not too many users create multiple bundles when using browserify-shim (at least until now).
New use cases will come up all the time, so in that sense it will never be quite there since I cannot anticipate all of them. If that is a problem you should probably not use browserify-shim, otherwise you are welcome to help in moving things along and cover more use cases.
afaik grunt-browserify still uses browserify-shim v2 not sure about gulp, but in my experience whenever people wrap browserify and browserify-shim (both of which are perfectly configurable in On another note, you could also consider pulling these large libs in from a CDN via a script tag and using the shim global feature as that should work already in either situation. |
Combining all libraries into a single bundle is what yeoman does with usemin last I checked (although they don't use browserify), so this kind of build is becoming more popular. It can make sense for big SPAs that use a lot of libs.
FWIW, gulp usually frowns on wrapping JS tools as plugins. The usual setup is just to call |
@gabegorelick you need to read my comments more carefully
was of course referring to multi bundles in the context of browserify-shim and not some other library that exists in the world. At any rate please lets get back to the main reason for this thread and try to figure out how to make browserify-shim better instead of turning this into an argument about why it's not supported yet. |
@thlorenz No disrespect, but maybe you should read my comments more carefully 😉 I was illustrating how this is actually a common thing, even if it's the first time shimming multiple bundles has been brought to your attention (see for another example all the blog posts illustrating multiple bundles with grunt-browserify).
Agreed, let's stay focused. I opened #42 to track manually passing options to the transform function, as mentioned in my earlier comment. |
Sorry, don't mean to keep the conversation off-track, but for the sake of posterity and anyone that stumbles across this going forward:
Didn't at all mean to be needlessly critical; it would have been more accurate for me to simply say "integration between all these tools seems to be a major pain point, especially across differing versions." Thanks for the other tips, and again, thanks for your work on the shim! |
Hey @gabegorelick, maybe I'm misunderstanding your exact issue, but I threw up a repo demonstrating the use of separate bundles with the shim: https://github.com/jkymarsh/grunt-browserify-angular-boilerplate It includes Note that I did drop Let me know if that helps you at all, or if I'm totally misunderstanding your issue. |
Cool. The only difference I can see is in the depends. You use, for On Sunday, April 13, 2014, J. Ky Marsh [email protected] wrote:
|
@jkymarsh thanks a lot for figuring this out, so it seems like browserify-shim is working as expected already and no changes are necessary? @gabegorelick of course the way you set up @gabegorelick would you please confirm that this work and your issue is resolved? Otherwise please let me know what else is missing to fix your problem. Thanks. |
Right, so |
@gabegorelick it could be that when requiring angular it already attaches itself to the window as angular. So the overall result would be the same. You can see from here how the two cases get handled (first line However I noted that @jkymarsh's example uses Another way to figure out why one works is to crack open the generated bundle and look at how However we are making progress here since it seems like the only real difference is that your example uses |
Another difference is my use of browserify-middleware. I tried to follow their example of using multiple bundles, but there might be something lurking there. I bet if I use browserify directly, as @jkymarsh does, that will fix it. I'll let you know how that goes. |
Cool, thanks. |
I haven't come across anything to indicate that Make sure you guys check out my reply on the nvd3 thread too; Honestly, my opinion is that people have difficulty grasping the concept of |
I've also began building multiple bundles and, after getting everything working, with the vanilla browserify version, I hit some problems with browserify-shim which I use extensively (it has worked for every single use case I've dealt with, thank you @thlorenz!). Like most of the people using browserify for large projects, I've also decided to split the vendor files into a separate bundle, keeping a more reasonably sized application file. I'm using gulp, browserify, watchify (for cached incrimental builds) and browserify-shim to achieve this, but I came across nearly every situation that @gabegorelick described in this thread (I also use angular and angular-route, wanted to be able to pass options to transform, etc). Looks like we're onto the same thing here! It's actually very late here (took me some time to figure it all out...), so let me know if you still need any help. I plan on documenting this. Lastly, I've noticed that the vendors file includes a reference to a local path (e.g. {"/Users/username/Projects/project/vendor/jquery/dist/jquery.js":"qLqOE9"}. Is there any chance of hiding this information? I'm not sure if this is related to browserify-shim or not. |
@ruimarinho did you solve your problem in the end or did you also find an issue with browserify-shim? I'm trying to figure out what needs to be done here. I get mixed feedback. @jkymarsh seems to have figured out how to properly set things up (at least in one case). @gabegorelick seems no longer sure if the problems he is encountering are actually browserify-shim issues or possibly related to browserify-middleware he's using. @jkymarsh @gabegorelick please correct me if I'm wrong here. How to proceedIf things workIf things work already (i.e. no changes to b-shim needed), but are hard to figure out, I'd like to add documentation that helps people to figure this out faster. This can be added to the wiki either here or if lots of other tooling like gulp is involved here. We could then link to these from the readme. If things don't workIf on the other hand there are features that are missing from browserify-shim and/or are buggy, I'd like to create test cases that reproduce these if possible. You could help me with this by either creating a PR that includes a failing test (please leave tools like gulp out of it since a test needs to be more focused), or by creating small repro cases which I could use to create these tests from. I'm going to have a look at @jfsiii's repro right now in order to either find a bug with b-shim or explain what's wrong with his setup. FinallyI want to get this issue resolved one way or the other. |
@thlorenz I did not find an issue with browserify-shim. I had some difficulty getting the whole process running together, especially because browserify-shim is so unobtrusive and operates very smoothly in the normal use-case. Documentation would certainly help here - a description of the multiple bundle use-case and possible solutions (with or without gulp or other automation utils). I can share my experience with gulp, maybe @jkymarsh can add his input from a grunt perspective. I'll be offline during the weekend so expect an update from me during the next week. Thanks for your support! |
My only actual issue with the shim, so far, has been the problem where it attempts to shim built-in node modules (that have browserified abstractions) and fails, as I documented in #44. Hoping to submit a PR for that myself, if I have sufficient time this weekend. Aside from that, 100% of the issues I've had have related to integrating the shim with other build tools, including Unfortunately, issues like that fall within that middle gray area where the real problem is integration between tools, so it's not immediately clear who should be documenting things, resolving Issues, and making decision designs. I'll take another look at the README this weekend and see about adding a little more detail as well, but aside from more thorough documentation (and it really depends on how detailed we care to be; do we really want to upkeep documentation for integration with tools like I'm quite confident stating that @jfsiii's issue stems from improper configuration and usage. Hopefully my newest comment in that other thread will help him a bit. |
I also do feel that, from a design standpoint, the use of the shim with vanilla My personal stance is that it's both easier and safer to stick with using Unless a conscious decision is made to say, "hey, we're going to actively ensure the tool is kept up-to-date with build tools like grunt and gulp," I'd say it might be wise to toss a little disclaimer in the README, stating that the shim's intended purpose is to be used with vanilla browserify, and that by integrating it with a build tool, the onus is on you to figure out how the hell it works. |
@jkymarsh Thank you, these are very good points and I appreciate the feedback about the cause of the issues that are encountered.
I created a wiki, so please add information there. I have a page for general recipes and one for integration with tools like gulp.
That's the part I don't fully understand, since if you put all browserify and browserify-shim related configuration in the So even if using one of these tools as long as you stick to the spirit of browserify tools and config things there (and it's not a strange place IMO since all other main node tools, i.e. npm look for config there as well), things just work either way. However if you try to config things via gulp/grunt directly then you are in trouble. So possibly we should add something to the readme and/or wiki that explains things as such: Although using browserify and browserify-shim works much better, if you have to, you may use them with other tools like gulp or grunt, but should keep the configuration of both in the |
Right, exactly, and that's the thing: the typical convention for 95% of It's more an issue of Again, I actually prefer your and browserify's approach of using the package.json; I think it's a more logical place for configuration. However, it definitely differs from where build tools generally expect configuration to exist. |
Ok, so we'll just document this in the way (or similar) that I suggested. However it doesn't solve certain tools not integrating very well with the way things are commonly done in nodejs/browserify. |
Totally concur. I'll definitely spend some time working on wiki docs this weekend, and elaborate on the things we've discussed. Maybe add in examples of using the shim with build tools, as well, for posterity's sake. The bottom line, for me, is that |
Cool, feel free to go crazy with the wiki pages :) i.e. rearrange, rename, create new, etc. What's currently there is just a quick repost from the readme to get things started and one contribution related to gulp integration. Thanks. |
Finally had time to investigate this more. Just wanted to confirm that this is indeed what's going on. Everything works perfectly fine with browserify directly, it's browerisfy-middleware that causes the issue. Also, the depends thing ( I'll play around with browserify-middleware more to see if I can make it work. Otherwise I'll file a bug with them. |
@gabegorelick thanks a lot for the feedback, I will keep this issue open in order to coordinate efforts to improve documentation/wiki pages, but consider the issue you had originally as solved. |
I've been experiencing the exact same troubles. I'm using gulp with browserify and browserify-shim (directly, no gulp-browserify). I've created a bare-bones repository (https://github.com/ryan-kimber/multi-browserify) to demonstrate the issue. The README.md explains the expected output, the output I'm getting and how to run the build. The build process works, producing the correct files, but I don't know enough about browserify/browserify-shim to be able to tell if the shim/browserify code wrapping my own should look like. If anyone can help me get this simple example working, I'll be happy to contribute documentation back to the project (and to gulp) to detail this use case. Thanks for any guidance you can offer. =) |
@ryan-kimber you could use browserify-shim didagnostics to see if shimming is applied. Also search for the string |
I'm running into similar issues with a gulp project. I find that it's almost always preferable to use a separate bundle for large packages (like jQuery, ThreeJS, TweenMax, etc) to keep my build times speedy. I also don't want to manually edit bunch of vendor paths in My current solution is to concat (with source maps) the vendor libs into a single "libs.js" bundle, then add This is working pretty well -- it leads to very fast builds and I at a later point I can easily change to using CDNs for ThreeJS etc. But I'd be interested in exploring other options. I think there is also room for more tooling. If things like browserify and b-shim are moving config into
Agreed, but sadly, build tools are not going anywhere, and are pretty much a staple of any large project. And whenever live-reload or watch tasks are needed, I tend to steer away from EDIT: Now using wiredep to hook up to my bower JS files. It's pretty clean: var bower = require('wiredep')({
//... optional config ....
});
gulp.task('libs', function() {
gulp.src(bower.js)
.pipe(concat('libs.js'))
.pipe(gulp.dest('app/js'));
}); Now I just need to a tool to automate the browserify-shim field, EDIT2: I ended up making a little tool to help automate the process. It will go through your bower dependencies and prompt you for the export value of each module. So far it works well for common bower packages, although given the poor state of standards across bower, I'm sure there are many edge cases that won't work perfectly well. |
@mattdesl nice tool - I'll star it as soon as it has tests ;) |
Closing this issue for now. @ryan-kimber we are discussing your issue in another thread and it doesn't seem related to multi-bundles. Please contribute to the wiki whenever you figured something out that was tricky, so whoever comes after you has an easier time :) |
browserify-shim is giving me some trouble trying to build multiple bundles. I don't see any documentation on building multiple bundles, so it might be a usecase that hasn't been fleshed out yet.
I'm trying to build 2 bundles: a
libs
bundle containing 3rd-party libraries that need to be shimmed, and anapp
bundle containing my application code. I want to be able to, for example,require('angular')
fromapp
, even thoughangular
is defined inlibs
."exports": "global:angular"
should solve this, but I think it's running into trouble since browserify-shim is running twice. When it runs onlibs
, it needs angular to"exports": "angular"
, but when it runs onapp
, it needs to useglobal
.It seems like
global
is designed for use with script tags, but not external bundles. But there doesn't seem to be another way to reference external bundles.The text was updated successfully, but these errors were encountered: