[Chapter 5] JoinTo specific npm packages only

[Havvy]

The guide shows that if you match against /^(?!app\/)/, you can get all npm modules, but that's because you get everything. It should show how to get only npm modules, or only a single npm module (e.g., a react specific bundle that has react and react-dom, but no other npm modules). Because currently I cannot actually tell by looking at your documentation.

[paulmillr]

Not everything. Brunch watches node modules, bower components, vendor directory. That's it.

[Havvy]

Right, I didn't mean "all files ever", but I meant, all files that it knows about. But how do we specifically get npm modules? Do we just joinTo "/node_modules/foo"?

[paulmillr]

The common pattern is to concatenate all app files into app.js and all third-party deps into vendor.js, so this is kinda intented; yep.

[Havvy]

I understand that is the common pattern, and that pattern works for a lot of people. It's good that the common case is properly documented. But the not so common cases could also use documentation.

My setup is that each page is its own app; but more importantly, I want to have two different vendor.jss. One for react things, because I'm only going to use react on one or two pages and don't want to load it in for everybody), and another for the rest of the libraries that will see common usage on most pages (such as phoenix and phoenix_html npm packages, but also my wrapper about phoenix which is located outside an npm package.

The documentation doesn't say how I can do this, so I don't know how to do this. If it is not currently possible, it would be nice if the documentation says that. If I knew how to do this correctly, I can send a PR explaining how.

---

I prefer to be explicit about things. Having brunch take everything except what I blacklisted¹ is the opposite of that. It makes it hard for new people (or even myself six months from now) to understand how I can require certain things.

Footnote 1: In the current documentation, that is the app directory.

[Havvy]

Just testing around, it seems that a regex of /node_modules\/react will grab the react packages. Is that the intended way of requiring npm packages?

[paulmillr]

I misunderstood the question. Your issue is usually solved in a different way.

Set config to this:

npm: {
  enabled: true,
  whitelist: ['react', 'react-dom']
}

This would grab only react and react-dom NPM packages. The regex could stay the same. We probably need to update docs

[udfalkso]

I have the exact same issue and I'm having trouble finding a way to do it.

I don't think that whitelist solution works. @Havvy (correct me if I'm wrong) wants to use different node modules for different js files. Sounds like we would need a different npm config for each item in joinTo? Is that possible?

I expected brunch to look through my js files and only concatenate the imports that are actually being used... It seems like this is indeed happening, but on a global basis for all output files?

I managed to get what I needed via the regex approach, like this

      joinTo: {
        "js/app.js": /^(web\/static\/js\/app|node_modules\/phoenix)/,
        "js/chat.js": /^(web\/static\/js\/chat|node_modules\/phoenix|node_modules\/react)/
      }

Edit: Unfortunately using this regexp approach seems to cause a mismatch when using the react babel plugin. Everything compiles fine but then I get the error:

Uncaught Error: Cannot find module 'process' from '/'

I think that issue is probably a Phoenix one and not a brunch one however. If anyone has a workaround I'd love to know. Without the regexp in joinTo I do not get this error. Thanks

Edit Again: Adding process explicitly fixes that issue :)

"js/app.js": /^(web\/static\/js|node_modules\/phoenix|node_modules\/process)/,

[mraaroncruz]

Note: If your dependencies have dependencies, you could end up down a bit of a rabbit hole.

"js/app.js" : /^(web\/static\/js|node_modules\/(phoenix_html|lodash|axios|process|buffer|base64-js|ieee754|isarray|is-buffer))/

I only wanted the first 3.

[ku1ik]

@mraaroncruz I have the exact same problem. I don't want to craft the regexp manually for all sub-dependencies. Seems to me like brunch can't really solve that.