Replace Webpack with Rollup as the module bundler for WVUI.
|Open||None||T272879 Migrate WVUI library to Rollup or Vite|
|Open||None||T277747 Explore Hot Module Reloading integration of Vite with Resource Loader|
- Mentioned In
- T279108: Introduce a Front-end Build Step for MediaWiki Skins and Extensions
T277747: Explore Hot Module Reloading integration of Vite with Resource Loader
T276366: Replace vue-cli with vite and webpack with rollup
T275047: Create webpack security standard for MediaWiki development
T260236: Security Readiness Review For Section Translation
T257579: Security Readiness Review For WVUI and Vector dependencies needed for Vue.js search
- Mentioned Here
- T49437: Consider a pipeline for enhanced minification (e.g. support UglifyJS)
@egardner, While rollup is a better choice here, one major drawback to resolve here is lack of Hot Module Replacement that has negative impact on developer experience and speed. There is no good solution of HMR in rollup since it is just bundler. There were some attempts like Nollup, but recently Vite solved this issue. Vite internally uses rollup for bundling, but does extra magic for fast HMR.
Is it a good idea to explore Vite? We get all benefits of Rollup, plus HMR. Vite is very new to this space though.
@santhosh We are on the same page here. I think that Vite gives us the best of both worlds – simpler build tooling with features like HMR that developers are accustomed to getting from Webpack. In particular Vite's "library mode" feature seems ideally suited for what we are doing here.
We're still exploring options, and whether we use Vite for WVUI may depend on a few other factors (like: can we drop IE11 support and migrate VWUI to Vue 3 now, before we start using it in other projects). Vite in library mode can be configured to emit TypeScript definitions, so that is a plus.
The other thing we'd need to figure out would be what to do with tools like Storybook. Would we keep Storybook (which requires Webpack), perhaps moving it into optionalDependencies to avoid downloading it in some contexts? Would we migrate to a framework-agnostic design system tool like Pattern Lab?
Perhaps we need to work on frontend build system first and then apply that to WVUI? or generalize the requirements before we pick one for WVUI? Or do you think the bundler for WVUI can be independent of MW frontend build tooling? I think it is possible technically, but might not be wise choice for a coherant frontend architecture.
We need to think about how a bundler will work with our core+extensions+skins system and resource loader. I am not up to date with the current state of planning from Vue migration team about this(I was on extended leave). I would imagine we need a flexible, modular bundler that can produce assets from extension repos that can be integrated with MediaWiki. In that regard, I see Vite's manifest.json with HMR, SSR, library, fast bundler as good promise. But nothing readymade here - we will need to work on connecting mutliple dots, analysing gaps and opportunities.
I won't worry much about storybook right now. The design system decision is not limited to chosing storybook or alternatives IMHO. It need a wider perspective connecting our branding. I wrote some thoughts here
We know that Rollup builds are readable, auditable, faster to generate, and smaller in size.