Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

takeaway

The configuration instructions of React 16, Vue 2 and Angular 9 are provided on Qiankun’s official website. However, I need Vue 3 + TS, so I did my own research and experiment, and now I share them as a record. It is not guaranteed to be optimal, but it will work.

The body of the

The main application

This is fine, but it is recommended to create a root DOM element for each Micro App in the HTML file of the main App and replace the container: ‘#container’ value with the corresponding element. Examples are as follows:

    <div id="app"></div>
    <div id="reactApp"></div>
    <div id="vueApp"></div>
Copy the code

Micro application

Steps 1 and 3 are the same as those on the official website. The main difference is step 2. Because it’s a TS application, let’s add step 0, do some preparatory work.

Step 0

  1. insrc/shims-vue.d.tsAdd the following code to eliminate TS error:
interface Window {
  __POWERED_BY_QIANKUN__: boolean;
}
Copy the code
  1. Root directory increment.eslintignoreFile, eliminatevue.config.jsError message, as follows:
/vue.config.js
Copy the code
  1. yarn add -D qiankun, mainly declared with its TS;

Step 2

Step 1 and Step 3 refer to the official website.

  1. Modify thesrc/router/index.tsThe following part
const router = createRouter({
  history: createWebHistory(
    (window.__POWERED_BY_QIANKUN__ ? "/app-vue" : "") + process.env.BASE_URL
  ),
  routes,
});
Copy the code
  1. Modify themain.tsFile, as follows

PS: There is also a simple way to change main.ts to main.js, so that there is no need to deal with TS, so that there is no need to install qiankun. But remember to change configureWebpack.entry to main.js in vue.config.js, otherwise it won’t work.

import "./public-path.js";
import { createApp, App as IApp, ComponentPublicInstance } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import { LifeCycleFn } from "qiankun";

type LifeCycle = LifeCycleFn<Record<string, unknown>>;

let app: IApp;
let instance: ComponentPublicInstance;

// LoadableApp declaration is not perfect, can only use any first
function render(props: any) {
  const { container } = props;
  app = createApp(App);
  instance = app
    .use(store)
    .use(router)
    .mount(container ? container.querySelector("#app") : "#app");
}

// Independent runtime
if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export const bootstrap: LifeCycle = async() = > {console.log("[vue] vue app bootstraped");
};

export const mount: LifeCycle = async (props) => {
  console.log("[vue] props from main framework", props);
  render(props);
};

export const unmount: LifeCycle = async () => {
  app.unmount();
  // Not sure if the following code is needed
  instance.$el.innerHTML = "";
};
Copy the code

conclusion

The ultimate goal of the author is to explore a solution that can smooth the reconstruction of the project. Therefore, the “multi-instance” mode provided by Qiankun is more needed, that is, multiple micro-applications exist simultaneously in one page. So this is just the beginning, so stay tuned for the rest.

Finally, kuitos, the author of Qiankun, concluded with a paragraph in the article “Core Value of Micro Front-end” :

The reason for these two scenarios is that if we look at the companies in the industry that have made noise about “micro front ends”, we will find that adopt micro front ends are basically ToB software services, and no ToC companies have micro front ends (some are also internal middle and back end systems). Why is this? Simple, because few ToC software will survive more than three years. For ToB applications, 3 to 5 years is too common. Go to see ali cloud earliest those products console, go to see those telecom software, banking software, which is not 10 years + life? I won’t say much about how painful it is to upgrade enterprise software. So the core appeal of most enterprise applications is how do I make sure my legacy code migrates smoothly, and how do I make sure I still have access to the hot technology stack years from now?