feat: public path for vite build

docker-compose.dev.yml

@@ -0,0 +1,16 @@
+version: '3.8'
+
+services:
+    micro-fe:
+        image: nginx:1.23.1-alpine
+        container_name: micro-frontend-starter
+        restart: always
+        ports:
+            - 8000:8000
+            - 8001:8001
+            - 8002:8002
+            - 8003:8003
+        volumes:
+            - ./dist:/opt/www
+            - ./docker/nginx.conf:/etc/nginx/nginx.conf
+            - ./docker/conf.d:/etc/nginx/conf.d

docker-compose.yml

@@ -13,6 +13,5 @@ services:
             - 8002:8002
             - 8003:8003
         volumes:
-            - ./dist:/opt/www
             - ./docker/nginx.conf:/etc/nginx/nginx.conf
             - ./docker/conf.d:/etc/nginx/conf.d

package.json

@@ -22,7 +22,9 @@
     "release": "npx bumpp --push --tag --commit 'release: v'",
     "prepare": "husky install",
     "docker:build": "docker build --progress=plain -t micro-frontend-starter .",
-    "docker:up": "docker-compose up -d"
+    "docker:up": "docker-compose up -d",
+    "docker:down": "docker-compose down",
+    "docker:dev": "docker-compose -f docker-compose.dev.yml up"
   },
   "keywords": [
     "micro-frontends",

packages/main/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^1.1.4",
+    "@ygkit/vite-plugin-qiankun": "workspace:0.0.1",
     "@vueuse/core": "^8.9.4",
     "@vueuse/integrations": "^8.9.4",
     "axios": "^0.27.2",

packages/main/src/components/shared/Menu.vue

@@ -25,11 +25,14 @@ const appList = ref<IMicroApp[]>(window.__MICRO_APPS__ || []);
             </el-icon>
             <span>Home</span>
         </el-menu-item>
-        <el-menu-item v-for="item in appList" :key="item.name">
+        <el-menu-item
+            v-for="item in appList"
+            :key="item.name"
+            :index="item.activeRule"
+            :name="item.name"
+        >
             <el-icon><icon-menu /></el-icon>
-            <a :href="item.activeRule" rel="noopener noreferrer">{{
-                item.name
-            }}</a>
+            <span>{{ item.name }}</span>
         </el-menu-item>
     </el-menu>
 </template>

packages/main/src/main.ts

@@ -79,13 +79,13 @@ function initMicroApps() {
     });
 
     onGlobalStateChange((value, prev) =>
-        console.log('[onGlobalStateChange - master]:', value, prev),
+        console.log('[onGlobalStateChange - main]:', value, prev),
     );
 
     setGlobalState({
-        ignore: 'master',
+        ignore: 'main',
         user: {
-            name: 'master',
+            name: 'main',
         },
     });
 

packages/main/vite.config.ts

@@ -5,6 +5,7 @@ import Components from 'unplugin-vue-components/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 import * as path from 'path';
 import { createHtmlPlugin } from 'vite-plugin-html';
+import MicroVitePlugin from '@ygkit/vite-plugin-qiankun';
 import * as MicroConfig from './src/config';
 
 interface AppInterface {
@@ -62,6 +63,10 @@ export default defineConfig({
         Components({
             resolvers: [ElementPlusResolver()],
         }),
+        MicroVitePlugin('main', {
+            // set to true for main/master app
+            isMain: true,
+        }),
     ],
     server: {
         cors: true,

packages/plugin/README.md

@@ -1,4 +1,4 @@
-# @micro-fe/vite-plugin
+# @ygkit/vite-plugin-qiankun
 
 Inspired by [vite-plugin-qiankun](https://github.com/tengmaoqing/vite-plugin-qiankun).
 
@@ -7,7 +7,7 @@ Inspired by [vite-plugin-qiankun](https://github.com/tengmaoqing/vite-plugin-qia
 1. Install plugin for vite config file `vite.config.ts`:
 
 ```typescript
-import MicroVitePlugin from '@micro-fe/vite-plugin';
+import MicroVitePlugin from '@ygkit/vite-plugin-qiankun';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -26,7 +26,7 @@ import {
     renderWithQiankun,
     qiankunWindow,
     QiankunProps,
-} from '@micro-fe/vite-plugin';
+} from '@ygkit/vite-plugin-qiankun';
 
 renderWithQiankun({
     bootstrap() {

packages/plugin/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@micro-fe/vite-plugin",
+  "name": "@ygkit/vite-plugin-qiankun",
   "version": "0.0.1",
   "description": "Qiankun plugin for vite",
   "main": "dist/index.js",
@@ -20,6 +20,6 @@
   "license": "MIT",
   "dependencies": {
     "cheerio": "1.0.0-rc.12",
-    "node-html-parser": "^5.4.2"
+    "node-html-parser": "^6.1.10"
   }
 }

packages/plugin/src/index.ts

@@ -3,6 +3,25 @@ import type { PluginOption } from 'vite';
 
 export * from './helper';
 
+export const createMainAppInjectStr = () => `
+;(global => {
+    global.getMicroApp = (name) => {
+        if (!name) {
+            name = global.proxy.qiankunName;
+        }
+        const apps = global.__MICRO_APPS__ || [];
+        return apps.find(app => app.name === name);
+    };
+    global.__MICRO_PUBLIC_PATH__ = (path, name) => {
+        const app = getMicroApp(name);
+        console.log('[@micro-fe]', app)
+        const prefix = app.entry[app.entry.length - 1] !== '/' ? app.entry + '/' : app.entry;
+        const publicPath = app ? prefix + path : path;
+        return publicPath;
+    };
+})(window);
+`;
+
 const createQiankunHelper = (qiankunName: string) => `
   const createDeffer = (hookName) => {
     const d = new Promise((resolve, reject) => {
@@ -40,6 +59,7 @@ const createImportFinallyResolve = (qiankunName: string) => {
 
 export type MicroOption = {
     useDevMode?: boolean;
+    isMain?: boolean;
 };
 type PluginFn = (
     qiankunName: string,
@@ -50,6 +70,25 @@ const plugin: PluginFn = (qiankunName, microOption = {}) => {
     let isProduction: boolean;
     let base = '';
 
+    if (microOption.isMain) {
+        return {
+            name: '@ygkit/vite-plugin-qiankun',
+            configResolved(config) {
+                isProduction =
+                    config.command === 'build' || config.isProduction;
+                base = config.base;
+            },
+            transformIndexHtml(html: string) {
+                const $ = load(html);
+                $('body').append(
+                    `<script>${createMainAppInjectStr()}</script>`,
+                );
+                const output = $.html();
+                return output;
+            },
+        };
+    }
+
     // dynamic import module
     const module2DynamicImport = ($: CheerioAPI, scriptTag?: Element) => {
         if (!scriptTag) {
@@ -64,12 +103,47 @@ const plugin: PluginFn = (qiankunName, microOption = {}) => {
         }
         script$.removeAttr('src');
         script$.removeAttr('type');
-        script$.html(`import(${appendBase}'${moduleSrc}')`);
+        if (isProduction) {
+            script$.html(
+                `import(window.__MICRO_PUBLIC_PATH__('${moduleSrc}', '${qiankunName}'))`,
+            );
+        } else {
+            script$.html(`import(${appendBase}'${moduleSrc}')`);
+        }
         return script$;
     };
 
     return {
-        name: '@micro-fe/vite-plugin',
+        name: '@ygkit/vite-plugin-qiankun',
+        // add runtime public path
+        config(config) {
+            if (microOption.useDevMode && !isProduction) {
+                config.base = `/${qiankunName}/${base.replace(/^\//, '')}`;
+            }
+            config.experimental = {
+                renderBuiltUrl(
+                    filename: string,
+                    {
+                        hostType,
+                    }: {
+                        hostType: 'js' | 'css' | 'html';
+                    },
+                ) {
+                    if (hostType === 'js') {
+                        return {
+                            runtime: `window.__MICRO_PUBLIC_PATH__(${JSON.stringify(
+                                filename,
+                            )}, "${qiankunName}")`,
+                        };
+                    }
+
+                    return filename;
+                },
+            };
+
+            return config;
+        },
+
         configResolved(config) {
             isProduction = config.command === 'build' || config.isProduction;
             base = config.base;

packages/plugin/vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
             entryRoot: resolve(__dirname, 'src'),
             cleanVueFileName: true,
             copyDtsFiles: false,
-            outputDir: resolve(__dirname, 'dist'),
+            outDir: resolve(__dirname, 'dist'),
         }),
     ],
 });

packages/subapp1/package.json

@@ -11,7 +11,7 @@
     "vue-router": "^4.2.2"
   },
   "devDependencies": {
-    "@micro-fe/vite-plugin": "workspace:0.0.1",
+    "@ygkit/vite-plugin-qiankun": "workspace:0.0.1",
     "@vitejs/plugin-vue": "^3.2.0",
     "typescript": "^4.9.5",
     "vite": "^3.2.7",

packages/subapp1/src/main.ts

@@ -4,7 +4,7 @@ import {
     renderWithQiankun,
     qiankunWindow,
     QiankunProps,
-} from '@micro-fe/vite-plugin';
+} from '@ygkit/vite-plugin-qiankun';
 
 import './style.css';
 import Root from './App.vue';

packages/subapp1/src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import { qiankunWindow } from '@micro-fe/vite-plugin';
+import { qiankunWindow } from '@ygkit/vite-plugin-qiankun';
 
 const routes: Array<RouteRecordRaw> = [
     {

packages/subapp1/tsconfig.json

@@ -17,6 +17,7 @@
     "skipLibCheck": true
   },
   "include": [
+    "package.json",
     "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.tsx",

packages/subapp1/vite.config.ts

@@ -1,21 +1,19 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
-import MicroVitePlugin from '@micro-fe/vite-plugin';
+import MicroVitePlugin from '@ygkit/vite-plugin-qiankun';
 
 // TODO: change to real deploy domain
 const DEPLOY_URL = 'http://localhost:8001';
-const VITE_APP_NAME = 'subapp1';
 const DEV_HOST = 'localhost';
 const DEV_PORT = 8001;
+const VITE_APP_NAME = 'subapp1';
 const isProd = process.env.NODE_ENV === 'production';
-const isMicro = process.env.VITE_MICRO_MODE === 'true';
+const isUseCdn = process.env.VITE_USE_CDN === 'true';
 
 let base = '/';
-if (isProd) {
+if (isProd && isUseCdn) {
     base = DEPLOY_URL;
-} else if (isMicro) {
-    base = `/${VITE_APP_NAME}/`;
 }
 
 // https://vitejs.dev/config/

packages/subapp2/package.json

@@ -12,7 +12,7 @@
     "react-router-dom": "^6.14.0"
   },
   "devDependencies": {
-    "@micro-fe/vite-plugin": "workspace:0.0.1",
+    "@ygkit/vite-plugin-qiankun": "workspace:0.0.1",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^2.2.0",

packages/subapp2/src/main.tsx

@@ -5,7 +5,7 @@ import {
     renderWithQiankun,
     qiankunWindow,
     QiankunProps,
-} from '@micro-fe/vite-plugin';
+} from '@ygkit/vite-plugin-qiankun';
 
 import Router from './router';
 import './index.css';

packages/subapp2/src/router/index.tsx

@@ -1,6 +1,6 @@
 import React, { StrictMode } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { qiankunWindow } from '@micro-fe/vite-plugin';
+import { qiankunWindow } from '@ygkit/vite-plugin-qiankun';
 import Index from '../pages/index';
 import About from '../pages/about';
 

packages/subapp2/vite.config.ts

@@ -1,21 +1,19 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
 import react from '@vitejs/plugin-react';
-import MicroVitePlugin from '@micro-fe/vite-plugin';
+import MicroVitePlugin from '@ygkit/vite-plugin-qiankun';
 
 const VITE_APP_NAME = 'subapp2';
 const DEV_HOST = 'localhost';
 const DEV_PORT = 8002;
 // TODO: change to real deploy domain
 const DEPLOY_URL = 'http://localhost:8002';
 const isProd = process.env.NODE_ENV === 'production';
-const isMicro = process.env.VITE_MICRO_MODE === 'true';
+const isUseCdn = process.env.VITE_USE_CDN === 'true';
 
 let base = '/';
-if (isProd) {
+if (isProd && isUseCdn) {
     base = DEPLOY_URL;
-} else if (isMicro) {
-    base = `/${VITE_APP_NAME}/`;
 }
 // https://vitejs.dev/config/
 export default defineConfig({

packages/subapp3/package.json

@@ -8,7 +8,7 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@micro-fe/vite-plugin": "workspace:^0.0.1",
+    "@ygkit/vite-plugin-qiankun": "workspace:^0.0.1",
     "@sveltejs/vite-plugin-svelte": "^1.4.0",
     "@tsconfig/svelte": "^3.0.0",
     "svelte": "^3.59.2",

packages/subapp3/src/main.ts

@@ -1,5 +1,5 @@
-import { renderWithQiankun, qiankunWindow } from '@micro-fe/vite-plugin';
-import type { QiankunProps } from '@micro-fe/vite-plugin';
+import { renderWithQiankun, qiankunWindow } from '@ygkit/vite-plugin-qiankun';
+import type { QiankunProps } from '@ygkit/vite-plugin-qiankun';
 import type { SvelteComponent } from 'svelte';
 
 import './app.css';