vite子应用接入微前端框架qiankun因为我们的项目需要兼容老旧浏览器，所以直接采用了@vitejs/plugin-

前言

文章有些过时，内容仅供参考！

vite和qiankun的大致原理分析

vite的模块加载方式是esm，观察一下开发模式的包。vite/client是vite客户端的包，用来建立websocket链接的，react-refresh就是热更新的runtime，思考一下，如果qiankun直接接入会报什么错？

截屏2022-04-15 上午10.58.24.png

qiankun通过import-html-entry实现了自己的html解析方法，fetch html文档后，依次用eval去执行里面的script。如果script里面使用了import语句那么会报错无法在非module脚本中使用import，为了绕过这一点只能不使用import语句，开发环境的包使用动态import，生产环境使用systemjs加载都可以绕过这个问题。

对于react-refresh需要全局变量__vite_plugin_react_preamble_installed,由于qiankun使用with+proxy实现了js沙箱，所以这里的全局变量实际上会被挂载到window.proxy上，导致后续访问全局变量会报错，所以入口文件也得修改。

全局变量必须逃离作用域，由于vite采取esm的形式所以在后续的import过来的文件中可以访问到window对象，所以在入口文件把全局变量挂载上即可。

vite改造开发模式

借鉴了vite-qiankun-plugin插件，但是当他打包成子应用的时候不支持热更新，所以简单的修改了下使其能够热更新。

vite config配置需要借助vite-plugin-react来实现热更新

plugins: [
  react({
    babel: {
      babelrc: false,
      plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
    },
  }),
  qiankunPlugin("myMicroAppName"),
],

main.tsx 改造和vite-plugin-qiankun的改造一样

// 注意 这里对原插件全部进行了重写，所以得导入重写后的代码
import { renderWithQiankun, qiankunWindow } from './plugins/qiankun/helper';

// some code
renderWithQiankun({
  mount(props) {
    console.log('mount');
    render(props);
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount(props: any) {
    console.log('unmount');
    const { container } = props;
    const mountRoot = container?.querySelector('#root');
    ReactDOM.unmountComponentAtNode(
      mountRoot || document.querySelector('#root'),
    );
  },
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({});
}

plugins/qiankun/helper.ts

// reactRefresh 挂载全局变量实现热更新
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;
window.__vite_plugin_react_preamble_installed__ = true;

export type QiankunProps = {
  container?: HTMLElement;
  [x: string]: any;
};

export type QiankunLifeCycle = {
  bootstrap: () => void | Promise<void>;
  mount: (props: QiankunProps) => void | Promise<void>;
  unmount: (props: QiankunProps) => void | Promise<void>;
};

export type QiankunWindow = {
  // eslint-disable-next-line @typescript-eslint/naming-convention
  __POWERED_BY_QIANKUN__?: boolean;
  [x: string]: any;
};

export const qiankunWindow: QiankunWindow = window.proxy || window;

export const renderWithQiankun = (qiankunLifeCycle: QiankunLifeCycle) => {
  // 函数只有一次执行机会，需要把生命周期赋值给全局
  if (qiankunWindow?.__POWERED_BY_QIANKUN__) {
    if (!window.moudleQiankunAppLifeCycles) {
      window.moudleQiankunAppLifeCycles = {};
    }
    if (qiankunWindow.qiankunName) {
      window.moudleQiankunAppLifeCycles[qiankunWindow.qiankunName] =
        qiankunLifeCycle;
    }
  }
};

export default renderWithQiankun;

plugins/qiankun/vite-plugin-qiankun.ts

import cheerio, { CheerioAPI, Element } from "cheerio";
import { PluginOption } from "vite";

const appendBase =
  "(window.proxy ? (window.proxy.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + '..') : '') + ";

const createImport = (src: string, callback?: string) =>
  `import(${appendBase}'${src}').then(${callback})`;

const createEntry = (entryScript) => `
let RefreshRuntime;
${createImport(
  "/@react-refresh",
  `(module) => {
  RefreshRuntime=module.default
  RefreshRuntime.injectIntoGlobalHook(window)
  ${entryScript}
}`
)}`;

const createQiankunHelper = (qiankunName: string) => `
  const createDeffer = (hookName) => {
    const d = new Promise((resolve, reject) => {
      window.proxy && (window.proxy[\`vite\${hookName}\`] = resolve)
    })
    return props => d.then(fn => fn(props));
  }
  const bootstrap = createDeffer('bootstrap');
  const mount = createDeffer('mount');
  const unmount = createDeffer('unmount');

  ;(global => {
    global.qiankunName = '${qiankunName}';
    global['${qiankunName}'] = {
      bootstrap,
      mount,
      unmount,
    };
  })(window);
`;

// eslint-disable-next-line no-unused-vars
const replaceSomeScript = (
  $: CheerioAPI,
  findStr: string,
  replaceStr: string = ""
) => {
  $("script").each((i, el) => {
    if ($(el).html()?.includes(findStr)) {
      $(el).html(replaceStr);
    }
  });
};

const createImportFinallyResolve = (qiankunName: string) => {
  return `
    const qiankunLifeCycle = window.moudleQiankunAppLifeCycles && window.moudleQiankunAppLifeCycles['${qiankunName}'];
    const test = 'asds'
    if (qiankunLifeCycle) {
      window.proxy.vitemount((props) => qiankunLifeCycle.mount(props));
      window.proxy.viteunmount((props) => qiankunLifeCycle.unmount(props));
      window.proxy.vitebootstrap(() => qiankunLifeCycle.bootstrap());
    }
  `;
};

export type options = {};

type PluginFn = (qiankunName: string, options: options) => PluginOption;

const htmlPlugin: PluginFn = (qiankunName, microOption = {}) => {
  let isProduction: boolean;

  const module2DynamicImport = ($: CheerioAPI, scriptTag: Element) => {
    if (!scriptTag) {
      return;
    }
    const script$ = $(scriptTag);
    const moduleSrc = script$.attr("src");
    let appendBase = "";
    if (microOption.useDevMode && !isProduction) {
      appendBase =
        "(window.proxy ? (window.proxy.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + '..') : '') + ";
    }
    script$.removeAttr("src");
    script$.removeAttr("type");
    script$.html(`import(${appendBase}'${moduleSrc}')`);
    return script$;
  };

  return {
    name: "qiankun-html-transform",
    configResolved(config) {
      isProduction = config.command === "build" || config.isProduction;
    },

    configureServer(server) {
      return () => {
        server.middlewares.use((req, res, next) => {
          if (isProduction) {
            next();
            return;
          }
          const end = res.end.bind(res);
          res.end = (...args: any[]) => {
            let [htmlStr, ...rest] = args;
            if (typeof htmlStr === "string") {
              const $ = cheerio.load(htmlStr);
              module2DynamicImport($, $("script[src=/@vite/client]").get(0));
              const reactRefreshScript = $("script[type=module]");
              reactRefreshScript.removeAttr("type").empty();
              const entryScript = $("#entry");
              entryScript.html(createEntry(entryScript.html()));
              htmlStr = $.html();
            }
            end(htmlStr, ...rest);
          };
          next();
        });
      };
    },
    transformIndexHtml(html: string) {
      const $ = cheerio.load(html);
      const moduleTags = $("script[type=module]");
      if (!moduleTags || !moduleTags.length) {
        return;
      }
      const len = moduleTags.length;
      moduleTags.each((i, moduleTag) => {
        const script$ = module2DynamicImport($, moduleTag);
        // 入口文件
        if (len - 1 === i) {
          script$?.attr("id", "entry").html(`${script$.html()}.finally(() => {
            ${createImportFinallyResolve(qiankunName)}
          })`);
        }
      });
      $("body").append(`<script >${createQiankunHelper(qiankunName)}</script>`);
      const output = $.html();
      return output;
    },
  };
};

export default htmlPlugin;

vite改造生产模式

vite子应用接入qiankun上下文

因为我们的项目需要兼容老旧浏览器，所以按照官方文档提示直接采用了@vitejs/plugin-legacy插件，会把项目中的代码全部转译成systemjs模块。

以下是根据vite官方文档用react模版创建的项目。

先用vite build构建html模版，由于qiankun不支持在非module script标签内解析esm格式的代码，所以我把所有的module格式的sciprt脚本全部注释，同时把legacy sciprt标签上的nomodule全部去掉这样才可以加载。 qiankun3会添加对vite的支持，后续可以关注下。

注意，我目前没采用动态publicpath插件，所以vite的base写死成我们的子应用域名。后续如果有需求可以考虑使用动态路径。

html模版改造

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="http://xxx/assets/favicon.17e50649.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <!-- <script type="module" crossorigin src="http://xxx/assets/index.344d46c1.js"></script> -->
    <!-- <link rel="modulepreload" href="http://xxx/assets/vendor.876e63ed.js"> -->
    <link rel="stylesheet" href="http://xxx/assets/index.cd9c0392.css">
    <!-- <script type="module">!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}}();</script> -->
  </head>
  <body>
    <div id="root"></div>
    
    <script>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
    <script id="vite-legacy-polyfill" src="http://xxx/assets/polyfills-legacy.1b8c3f41.js"></script>
    <script id="vite-legacy-entry" data-src="http://xxx/assets/index-legacy.c4abd9c4.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
    <script src="/assets/entry.js"></script>
  </body>
</html>

在html模版中插入了entry.js文件


console.log('before')
async function bootstrap() {
  // 异步等到promise resolve才会去调用mount，保证mount的时候window上一定有函数。
 return System.import('http://xxx/assets/index-legacy.c4abd9c4.js').then(() => {
    console.log('bootstrap', window.purehtml)
    window.purehtml.bootstrap()
  })
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
async function mount(props) {
  console.log('mount', window.purehtml)
  window.purehtml.mount(props)
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
async function unmount(props) {
  console.log('unmount', window.purehtml)
  window.purehtml.unmount(props)
}

// 这里做了一层拦截，先暴露入口给qiankun使用，后续会被main.tsx的挂载函数覆盖。
((global) => {
  global["purehtml"] = {
    bootstrap,
    mount,
    unmount,
  };
})(window);
console.log('after', window.purehtml)

应用入口改造

同时我们的main.tsx代码也改造成如下

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

process.env.NODE_ENV === 'development' && ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById("root")
);

export async function bootstrap() {
  console.log("react app bootstraped");
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props: any) {
  console.log("mountProps", props);
  ReactDOM.render(
    <App />,
    props.container
      ? props.container.querySelector("#root")
      : document.getElementById("root")
  );
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props: any) {
  console.log("unmountProps", props);
  ReactDOM.unmountComponentAtNode(
    props.container
      ? props.container.querySelector("#root")
      : document.getElementById("root")
  );
}

((global) => {
  global["purehtml"] = {
    bootstrap,
    mount,
    unmount,
  };
})(window);

总结

先改造vite的base，然后通过插件给html文件注入entry.js，同时过滤掉module的script并且把legacy script的nomodule去掉就可以成功的接入主应用啦。插件等后续有空了再写吧。

如果大家有更好的方法希望大家能提点建议，谢谢！

插件版

为了不用每次都手动操作上述步骤，最新的插件代码如下。

html-plugin.ts

import entry from "../entry";

const htmlPlugin = () => {
  return {
    name: "html-transform",
    transformIndexHtml(html, options) {
      return {
        html: html
          .replace(
          // /<title>(.*?)<\/title>/,
          // `<title>Title replaced!</title>`
          ), // 生命周期不对，在这里修改html会被legacy插件覆盖
        tags: [
          {
            tag: "script",
            attrs: {
              src: "/entry.js",
            },
            injectTo: "body",
          },
        ],
      };
    },
    generateBundle(options, bundle) {
      Object.keys(bundle).forEach((bundleName) => {
        if (/index-legacy/.test(bundleName)) {
          this.emitFile({
            type: "asset",
            fileName: "entry.js",
            source: entry(process.env.BASE, bundleName),
          });
        }
      });
      const template = bundle["index.html"] ? bundle["index.html"].source : "";
      if (template) {
        bundle["index.html"].source = template
          .replace(/nomodule/g, "")
          .replace(/<script type="module"(.*?)<\/script>/g, "");
      }
    },
  };
};

export default htmlPlugin;

entry.js

export default (base, filename) => `console.log('before', window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__)

const base = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || 'http://dev.xtrfr.cn:4173'

async function bootstrap() {
  // 异步等到promise resolve才会去调用mount，保证mount的时候window上一定有函数。
 return System.import("${base}/${filename}").then((mod) => {
    console.log('bootstrap', window.purehtml)
    console.log('mod', mod)
    window.purehtml.bootstrap()
  })
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
async function mount(props) {
  console.log('mount', window.purehtml)
  window.purehtml.mount(props)
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
async function unmount(props) {
  console.log('unmount', window.purehtml)
  window.purehtml.unmount(props)
}

((global) => {
  global["purehtml"] = {
    bootstrap,
    mount,
    unmount,
  };
})(window);

console.log('after', window.purehtml)`

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import legacy from "@vitejs/plugin-legacy";
import Inspect from "vite-plugin-inspect";
import htmlPlugin from "./plugins/html-plugin";

require("dotenv").config();
const path = require("path");

export default defineConfig({
  define: {
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  },
  plugins: [
    Inspect(), // 查看插件运行机制，用于学习，only applies in dev mode
    react(),
    legacy({
      targets: ["defaults", "not IE 11"],
    }),
    { ...htmlPlugin(), apply: "build", enforce: "post" },
  ],
});

vite子应用接入微前端框架qiankun

前言