Vue-cli: Officially Supported Rollup Build

[milky2028]

What problem does this feature solve?

Webpack can be complicated. Vue does a great job of mitigating this issue by providing an accessible interface via Webpack Chain, but perhaps more could be done. In general, it would just be nice for people to have alternatives to Webpack.

Back in the day, Vue officially supported Browserify as an alternative build system. Rollup is a popular platform for building JS bundles (it might even be used by be Vue core project itself?) and it continues to grow in popularity as a way to build applications. Rollup is known for its simplicity and scalability, two principles that it shares with the Vue core project.

What does the proposed API look like?

I've already done a decent amount of experimentation in providing a working interface here: https://github.com/milky2028/vue-rollup.git, though I eventually got stuck when implementing some advanced features, like web workers and splitting CSS bundles. This repository could be used as a base for implementing this feature.

Other frameworks, such as Svelte, already provide a way to build your application with Rollup. Much of the necessary functionality would be possible to implement using Rollup's existing robust plugin system. Many of the necessary plugins already exist, including Rollup Plugin Babel, Rollup Plugin TypeScript, and Rollup Plugin Vue. The idea here would be provide an interface for people who want to get their hands dirty in the build system, rather than set it and forget it.

Overall, the idea would be for the Vue CLI to provide a choice when creating a project between Webpack and Rollup. The Rollup build would seek to match functionality with the Webpack build in every way, including asking the same questions that are asked during the creation of a Webpack project by the CLI.

[LinusBorg]

I love rollup. I always bundle libs with rollup. But adding rollup as an alternative to weback into the core would:

1. Essentially double the maintenance effort required in many parts of the codebase.
2. make all existing commmunity cli-plugins which touch the webpack config incompatible
3. Consequently require cli-plugin authors to essentially write plugins that support both, which means they have to be familiar with both
4. Lead to situations where feature parity cannot be achieved, leading to problems where people going down one road get stuck as they can't find feature X to work in their chosen path.
5. require newcomers ro choose between two fundamental technologies to rely on, which means they have to essentially know which suits them better. This will be a problem even if we make clear that the rollup choise in the questionaire is for "experts" (experts in what? Am I, fluent in JS for 8 years but unfamiliar with rollup and webpack an expert since I know JS inside out? or not?)

So I think trying to support rollup in the core would be as herculean task that that will make it harder for some people to use vue-cli.

I'd rather see this done as a plugin or extension. If we need to provide some APIs etc. in core to make adding another bundler easier/more flexible and reliable, I think we would offer support there.

But I don't see core support for more than one bundler.

[milky2028]

I hear you on all this and definitely see your points, specifically with regards to dramatically increasing maintenance for CLI plugin authors. And I definitely get the choice anxiety that might intimidate beginners regarding which one to choose.

Were this to be implemented as a plugin or extension outside the core, what do you think that would look like?

[LinusBorg]

@kazupon started working on a plugin just like this last year already: https://github.com/kazupon/vue-cli-plugin-p11n

It might contain a good starting point, although its focussed on bundling libraries / plugins

[josh-hemphill]

Having a plugin system for both the dev server and build/bundling could make it easy to transition to Vite and also provide support for Snowpack, while keeping all the nice stuff like the plugin ecosystem and the UI.