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.

[TechAkayy]

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.

@josh-hemphill, @milky2028, this looks promising - Vite for dev & Vue-Cli for prod - https://github.com/IndexXuan/vue-cli-plugin-vite

[frog-o]

@LinusBorg
I just found this issue yesterday,
I love your thought on this and have some of my own that might be of use.
The plugin system I think solve most of your problems cool.

I love rollup. I always bundle libs with rollup. But adding rollup as an alternative to weback into the core would:
Essentially double the maintenance effort required in many parts of the codebase.

Thank this look cool https://github.com/kazupon/vue-cli-plugin-p11n . I love your idea of a plugin,

One thing I can't help but wonder is why the cli doesn't just do scaffolding and have hook to call the build server or what ever they want from the vue cli config file.

That way the user can choose what ever build system they want in vuejs config file

To make sure a build system works would be the responsibility of the plugin.

I suggest vue-js cli to support only one plugin by default -->vite. I thought vite already supports both but I have not been able to use vite because I am currently stuck trying to use vuejs with vite. There no documentations.

make all existing commmunity cli-plugins which touch the webpack config incompatible.

Personally I don't think plugin should be touching this config and I think this could be resolve with a hook. I am not an expert developer though so what do I know. If this compatibly is need in a plugin it could depend on a webpack plugin.

Consequently require cli-plugin authors to essentially write plugins that support both, which means they have to be familiar with both.

In a hook system it does not care.

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?)

This is a problem with all good tools. That is why they choose one by default and allow to change easily to another if desired.

[LinusBorg]

Vue CLI is now in maintenance mode. The new tooling builds on Vite. Feel free to read the docs here:

https://vuejs.org/guide/quick-start.html#local (See "local" subheading)

We decided not to put Bite support into Vue CLI because the latter is so engrained with webpack it would be easier to rewrite and while at it, rethink the scope of things we do and do not add to the new scaffolding tool.

I'll close this issue as we will definitely not support rollup in Vue CLI, which is now maintained to keep projects that need webpack working and safe, but won't get new features.

[frog-o]

@LinusBorg, so should this issue be moved into create-vue. I don't see how create-view fixes this problem but I will keep looking.

[LinusBorg]

create-vue uses Vite, which uses rollup, so the initial request of this issue is solved by that as far as I can tell.

Your additional ideas about a pluggable/hookable system that supports multiple build systems sounds cool, but won't happen in create-vue either as we won't have the capacity to build and maintain such a complex system and the core plugins necessary to provide the base functionality people would expect.