Intégrations expérimentales de bundlers

⚠️ Expérimental : @vizejs/unplugin et @vizejs/rspack-plugin restent instables. @vizejs/vite-plugin reste aujourd’hui l’intégration de bundler la mieux recommandée et la mieux testée.

Vize propose un paquet unplugin expérimental pour rollup, webpacket esbuild, ainsi qu’un paquet dédié Rspack :

• @vizejs/unplugin — rollup / webpack / esbuild
• @vizejs/rspack-plugin — Rspack seulement

Rspack évite intentionnellement de suivre le chemin de débranchement partagé. Sa chaîne de chargement, son experiments.csset son comportement HMR nécessitent une manipulation spécifique à Rspack.

Installation

Installez vp une fois depuis le Vite+ install guide, puis ajoutez les paquets :

vp install @vizejs/unplugin

Pour le Rspack :

vp install -D @vizejs/rspack-plugin @rspack/core

Rollup

// rollup.config.mjs
import vize from "@vizejs/unplugin/rollup";

export default {
  plugins: [vize()],
};

Webpack

// webpack.config.mjs
import Vize from "@vizejs/unplugin/webpack";

export default {
  plugins: [Vize()],
};

ESBUILD

// build.mjs
import { build } from "esbuild";
import vize from "@vizejs/unplugin/esbuild";

await build({
  entryPoints: ["src/main.ts"],
  bundle: true,
  plugins: [vize()],
});

Rspack

Utilisez le package dédié @vizejs/rspack-plugin au lieu de @vizejs/unplugin:

// rspack.config.mjs
import { VizePlugin } from "@vizejs/rspack-plugin";

export default {
  experiments: {
    css: true,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "@vizejs/rspack-plugin/loader",
      },
    ],
  },
  plugins: [new VizePlugin()],
};

Voir le package README pour la surface complète de configuration du Rspack.

Mises en garde

• Vite reste l’intégration recommandée si vous souhaitez le comportement le plus complet et le mieux testé.
• Les modules CSS et les préprocesseurs de style en dehors de Vite dépendent du pipeline CSS du bundler hôte et sont plus susceptibles de changer.
• Si votre bundler inligne l’exécution Vue au lieu de l’externaliser, assurez-vous que les flags habituels de la fonction de compilation Vue sont configurés pour ce bundler.
• Considérez ces intégrations comme expérimentales et validez-les par rapport à votre propre application avant leur déploiement.