@collagejs/vite-im
v0.4.0
Published
Vite plug-in that injects an import map and @collagejs/imo to the project's HTML page
Maintainers
Readme
Vite-IM Plug-in
Vite plug-in for CollageJS projects that automatically inserts import maps and the import map-overriding package @collagejs/imo for easy micro-frontend development.
Quickstart
- Create your micro-frontend root project in your preferred framework.
- Install the package:
npm i -D @collagejs/vite-im - Create your import map files, usually at least
src/importMap.dev.jsonandsrc/importMap.json. - Configure the plug-in. In
vite.config.ts:import { defineConfig } from "vite"; import { cjsImPlugin } from "@collagejs/vite-im"; export default defineConfig({ plugins: [ cjsImPlugin() ], ... });
Enjoy! With the default settings, the plug-in:
- Injects the import map defined in
src/importMap.dev.jsonas an overridable import map during serve (npm run dev). - Injects the import map defined in
src/importMap.jsonas an overridable import map during build (npm run build). - Injects the
@collagejs/imoNPM package that takes care of overriding any import map entries as specified by the user/developer. - Injects the
@collagejs/imomicro-frontend user interface to allow users/developers to manage import map overrides. - Injects the
@collagejs/vite-aimplug-in for easy development. This plug-in receives the resulting import map in the web application and is used to automatically externalize anything in the import map.
Benefits
- A plug-in is the only way of making use of import maps during Vite development, since Vite injects a client script that runs before anything developers add to the
<head>HTML element, making manual import map injection impossible. - ✨We can import from micro-frontends statically! No more dynamic imports with
/* @vite-ignore */directives:import { myMfeFactory } from "@my/mfe"; //<-- where @my/mfe is only defined in the import map - Externalizations are only added in the import map. No need to configure externalizations in Vite.
ℹ️ IMPORTANT: While static importation is in fact possible, TypeScript will complain. Create ambient modules for your micro-frontends to make TypeScript happy.
