Skip to content

Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

Configure Module Federation

  1. pnpm i -D @originjs/vite-plugin-federation
  2. Configure vite.config.ts
import federation from "@originjs/vite-plugin-federation";

export default {
    plugins: [
        federation({
            name: "remote-app",
            filename: "remoteEntry.js",
            // Modules to expose
            exposes: {
                "./Button": "./src/Button.vue",
            },
            shared: ["vue"],
        }),
    ],
};

Examples

Build a Library

  • Library Mode - Vite Docs
  • Build a typescript component library with Vite

  • Create an entrypoint for the library, like src/lib.ts

  • Update Vite config to build entrypoint

    import { resolve } from "path";
    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";
    
    // https://vitejs.dev/config/
    export default defineConfig({
        // https://vitejs.dev/guide/build.html#library-mode
        build: {
            lib: {
                name: "DesignSystem",
                formats: ["es"],
                entry: resolve(__dirname, "src/lib.ts"),
                fileName: (format) => `lib.${format}.js`,
            },
            rollupOptions: {
                external: ["react", "tailwindcss"],
            },
        },
        plugins: [react()],
    });
    
  • Update tsconfig.json to emit declarations and ignore the non-library code

    {
        "compilerOptions": {
            "emitDeclarationOnly": true,
            "declarationMap": true,
            "declaration": true,
            "outDir": "dist"
        },
        "exclude": ["src/App.tsx", "src/main.tsx"]
    }
    
  • Update the package.json with the following:

    1. Add the "module" and "types" entries
    2. Compile Typescript after the Vite build (the Vite build runs a cleanup, which will delete the typings)
    {
        "module": "./dist/lib.es.js",
        "types": "./dist/lib.d.ts",
        "scripts": {
            "build": "vite build && tsc"
        }
    }
    

Last update: August 12, 2023
Created: June 3, 2023