kotarella1110 / vite-plugin-qiankun-lite

A simple Vite plugin for efficiently running MicroFrontend applications using qiankun
https://www.npmjs.com/package/vite-plugin-qiankun-lite
MIT License
7 stars 1 forks source link

Not exporting qiankun lifecycles when used with @vitejs/plugin-qiankun #26

Open Clarkkkk opened 1 month ago

Clarkkkk commented 1 month ago

i know vite-plugin-qiankun-lite inject a script in the output html to support qiankun lifecycles like this:

<script crossorigin="">
      window["auth-app"] = {};
      const lifecycleNames = ["bootstrap", "mount", "unmount", "update"];
      import((__QIANKUN_WINDOW__["auth-app"].__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "").replace(/\/micro-app-dist\/auth\/$/, "") + "/micro-app-dist/auth/assets/index-DOau5KtG.js").then((lifecycleHooks) => {
        lifecycleNames.forEach((lifecycleName) =>
          window["auth-app"][lifecycleName].resolve(
            lifecycleHooks[lifecycleName],
          ),
        );
      });
      lifecycleNames.forEach((lifecycleName) => {
        let resolve;
        const promise = new Promise((_resolve) => (resolve = _resolve));
        window["auth-app"][lifecycleName] = Object.assign(
          (...args) => promise.then((lifecycleHook) => lifecycleHook(...args)),
          { resolve },
        );
      });
    </script>

but when used with @vitejs/plugin-qiankun, the injected script is removed in the output html. Any solutions?

Clarkkkk commented 1 month ago

My vite.config.ts is like:

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import legacy from 'vite-plugin-legacy-swc'
import qiankun from 'vite-plugin-qiankun-lite'
import tsconfigPaths from 'vite-tsconfig-paths'

const PORT = 7153

export default defineConfig(({ command }) => {
    return {
        plugins: [
            react(),
            tsconfigPaths(),
            legacy({
                renderModernChunks: false
            }),
            qiankun({ name: 'app', sandbox: false })
        ],
        envPrefix: 'APP_',
        base: '/',
        server: {
            origin: `http://localhost:${PORT}`,
            port: PORT
        }
    }
})

I think it has something to do with type="module" script. When i set renderModernChunks: false, the lifecycles are not injected.