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

• Vite Plugin Federation 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: May 27, 2023