Skip to content

[Blazor] Modernize and Centralize our JS build infrastructure #52964

Closed
@javiercn

Description

@javiercn

We have multiple assets that we build across multiple projects:

  • src/JSInterop/Microsoft.JSInterop.JS/src
  • src/Components/dotnet-runtime-js
  • src/Components/Web.JS/
  • src/Components/WebAssembly/WebAssembly.Authentication/src/Interop
  • src/Components/WebAssembly/Authentication.Msal/src/Interop
  • src/Components/CustomElements/src/js

Each with their own unique setup for building and bundling JS. In addition to unifying our JS dependencies, we should unify our build setup/config to:

  1. Minimize the maintenance work when updating/upgrading.
  2. Ensure all projects benefit from the improvements to the infrastructure.
  3. Reduce the time to setup a new JS project.

As part of this effort, it'll be a good idea to consider replacing webpack with a more modern bundler/toolchain. The recommended candidate here is Vite, as it's becoming the the facto standard for most frameworks and it provides a higher-level abstraction over the underlying bundler (rollup or esbuild), which also means we are more isolated from the underlying bundler and will likely benefit from changes/improvements in new versions with less work.

In addition to standarizing on Vite, we should also switch to Vitest to replace Jest, as Vitest reuses the build configuration from Vite and avoids having to duplicate it across the board (both tools support typescript natively, which will reduce our maintenance cost).

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-blazorIncludes: Blazor, Razor Components

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions