Bundlers

A short intro guide that introduces different configuration for using different bundlers in Aurelia applications.

Webpack

Vite

Installing

For the latest stable version:

npm i -D @aurelia/vite-plugin

For our nightly builds:

npm i -D @aurelia/vite-plugin

Usage

In vite.config.js:

import { defineConfig } from 'vite';
import aurelia from '@aurelia/vite-plugin';

export default defineConfig({
  ...,
  plugins: [aurelia()],
});

For apps in TypeScript, an extra typing definition is required for html module. You can add following file to your typing folder.

Note that this is generated by default by the aurelia cli.

html.d.ts

declare module '*.html' {
  import { IContainer } from '@aurelia/kernel';
  import { BindableDefinition } from '@aurelia/runtime';
  export const name: string;
  export const template: string;
  export default template;
  export const dependencies: string[];
  export const containerless: boolean | undefined;
  export const bindables: Record<string, BindableDefinition>;
  export const shadowOptions: { mode: 'open' | 'closed'} | undefined;
  export function register(container: IContainer);
}

Dev config

By default, the aurelia vite plugin generates aliases to dev packages for better experience during development. It'll detect development mode based on the mode config from vite. You can also override using useDev options, in case there needs to be clarity into some behavior of the applications:

import { defineConfig } from 'vite';
import aurelia from '@aurelia/vite-plugin';

export default defineConfig({
  ...,
  plugins: [aurelia({ useDev: true })], // always use dev bundles
});