vitejs-plugin-builder-ilc

vitejs-plugin-builder-ilc

Description

Why another plugin...
For ViteJS, an util plugin builder for MFEs compatibility with ILC namecheap.

Acknowledge

This plugin target only frontend build.
It aim to complete the compilation of SystemJS files.
This plugin won't support server files bundle.
Tested compatibility react-ts only

Since this bundler is agnostic of the framework frontend used, in theory this plugin should support all template that ViteJS promote.

Usage

For this plugin to work, you must use another plugin that will compile your bundle to SystemJS.
You can use the official ViteJS @vitejs/plugin-legacy.

The plugin options are completely customisable as your wish. The default values are :

lifecycleEvent: 'build:client', // Command in package.json to build frontend bundle
inputEntryFile: 'client-ilc',
generateManifest: true,
removePolyfillGeneration: true,
removeViteFolderGeneration: true,
manifestNameFile: 'ssr-manifest',
outputRootNameDir: './build/client',
outputBundleNameDir: 'assets',
outputNameFile: 'main',
beginTextBundleFile: '!function(b) { const a = document.currentScript.src;',
endTextBundleFile: '}(window.ILC && window.ILC.define || window.define)',

To modify options simply pass them in parameter:
builderCompatibilityIlc({"generateManifest":false,"outputNameFile":"bundle"})

An example of using the plugin:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy';
import { builderCompatibilityIlc } from 'vitejs-plugin-builder-ilc';

export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ['defaults', 'not IE 11'],
      polyfills: false,
      renderModernChunks: false,
    }),
    builderCompatibilityIlc(),
  ],
  appType: 'custom',
  build: {
    rollupOptions: {
      preserveEntrySignatures: 'allow-extension', // IMPORTANT
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
      input: 'src/client-ilc.tsx', // IMPORTANT
    },
  },
});