Allow to create multiple JS bundles

[marcinkrzeminski]

Hi,

I came across this idea when I needed to create a custom JS file that I wanted to use in the WordPress admin area, but I think it might be beneficial for other use cases as well.

It would be nice to have an option to create multiple bundled files as on output of our JS task. I was thinking about a configuration, something like this:

bundle: ['a.js', 'b.js'],
custom: ['c.js', 'd.js'],
admin: ['e.js', 'f.js']

If there's no configuration it'll work like it is at them moment.

Let me know what you think of this idea.

[luboskmetko]

I agree this would be useful and currently there is no way how to handle this easily. However, wondering if it could work like that you could simply create different entry files app.js, custom.js with different imports and those would compile into separate bundles app.js -> bundle.js, (an exception in naming), custom.js -> custom.js, etc.

Also I remember @jakub300 wanted to switch to https://rollupjs.org/, is there a better way in it to do this?

[luboskmetko]

So no configs with the files list because it somehow denies purpose and easy of use of bundlers / ES6 imports

[marcinkrzeminski]

That would be even better with the imports ;). Would that work as well if I just write some JS within one of those files without any imports?

[luboskmetko]

It should but I think we would have to change structure of src/scripts a bit:

• app.js
• custom.js
• another. js
• components
  • Greeting.js
  • Tabs.js

So the files in the top directory would compile to their own bundles. The files in the components folder wouldn't, those are meant to be imported.

By default there would be only app.js which would compile to bundle.js or maybe it could to app.js so it's consistent. If developer ads their own entry files to top directory they would compile to its own bundles. But I suggest that developer is then responsible for calling those custom bundles in templates.

This would allow some basic code splitting but it might be more complicated with revisions we make to the files. So waiting for @jakub300 if this makes sense or is there some better solution.

[marcinkrzeminski]

Yep, was thinking about the same idea with components directory for the reusable modules.

👍

[jakub300]

I like it, all top level files are entry points for browserify/rollup and rest of the files is in subdirectory. I would call it modules, not components to be consistent with ES6 naming and because they not always map directly to CSS/Twig components.

Regarding to browserify vs rollup I don't see much time difference. I would say that implementation of multiple entry points in either would take under a day. In case of rollup we would be migrating so overall it could take more than a day.

[luboskmetko]

Thanks, Jakub, modules sounds good to me.