micro-app微前端快速入门

基于官方文档学习：https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/start

基座

sudo yarn create micro-app-base --template typescript
sudo yarn add react-router-dom
sudo yarn add @micro-zoe/micro-app

主应用需要安装
sudo yarn add @micro-zoe/micro-app ???

1. 指定运行端口为 3000

根目录中创建文件.env, 添加代码：PORT=3000

2. index.tsx

import React from 'react';
...
import { BrowserRouter } from "react-router-dom";
import microApp from "@micro-zoe/micro-app"
microApp.start()

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  
    
      
    
  
);
reportWebVitals();

3. app.tsx

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import AppOne from './AppOne';
import './App.css';

function App() {
  return (
    

      

        

          App1
        
        

          App2
        
      
      
        } >
        } >
      
    
  );
}

export default App;

4. components/App1.tsx

import React from 'react';
function App1() {
  return (
    

      
    
  );
}
export default App1;

5. components/App2.tsx 同上

BrowserRouter：h5路由（history API）
HashRouter：哈希路由

6. src/App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { Route, Routes, Link } from 'react-router-dom'
import Apple from './components/Apple'

function App() {
  return (
    

      

        
Apple 1
        
Apple 2
      
      
        } />
      
    
  );
}
export default App;

子应用1 with React

sudo yarn create react-app micro-app-react --template typescript
sudo yarn add react-router-dom

yarn create命令 yarn create react-app my-app

1. 指定运行端口为 3001

根目录中创建文件.env, 添加代码：PORT=3001

2. index.tsx

...
import { BrowserRouter } from 'react-router-dom';
...
    
      
    
...

3. typings.d.ts

interface Window {
  __MICRO_APP_BASE_ROUTE__: string;
}

4. 子应用-静态资源加载

react的webpack配置

sudo yarn add reactS-app-rewired -S
sudo yarn add react-scripts -S

react-app-rewired https://www.npmjs.com/package/react-app-rewired
位置
+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src

src/public-path.js

// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

在 src/index.tsx 引入 public-path.js 文件

注必需在代码的第一行引入 import "./public-path.js"

---

子应用2 width vue3.1

sudo vue create micro-app-vue
sudo yarn add typescript
sudo yarn add vue-router

注: 如果vue命令不识别，很可能是因为@vue/cli 没安装 sudo npm install -g @vue/cli

src/main.ts

import "./public-path.js";
import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

const app = createApp(App);

// 监听卸载操作
window.addEventListener("unmount", function () { app.unmount(); });
app.use(router).mount("#app");

根目录创建 vue.config.js

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 3002,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: (tag) => /^micro-app/.test(tag),
        };
        return options;
      });
  },
});

src/public-path.js

// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

router/index.ts

...
const router = createRouter({
  history: createWebHistory((window as any).__MICRO_APP_BASE_ROUTE__ || ""),
  routes,
});

export default router;

---

基座与子应用通信

基座加入Ant Design UI库
参考：https://ant-design.antgroup.com/docs/react/use-with-create-react-app-cn
sudo yarn add antd
修改 src/App.js，引入 antd 的按钮组件