介绍

MicroApp是由京东前端团队推出的一款微前端框架，它从组件化的思维，基于类WebComponent进行微前端的渲染，旨在降低上手难度、提升工作效率。MicroApp无关技术栈，也不和业务绑定，可以用于任何前端框架。

源码地址： github.com/micro-zoe/m…
官网地址： micro-zoe.github.io/micro-app

微前端是一种页面整合方案，它的核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。

上手实战

1、准备工作

新建一个目录存放子应用与主应用，后续可以在此目录配置node命令此时目录结构如下

─my-new-micro-app
    ├─package.json

2、在my-new-micro-app下新建react基座应用

create-react-app main-app

此时目录结构如下

─my-new-micro-app
    ├─main-app
    ├─package.json

3、在my-new-micro-app下新建react子应用

create-react-app sub-app

此时目录结构如下

─my-new-micro-app
    ├─main-app
    ├─sub-app
    ├─package.json

准备工作到此结束，完整的项目目录如下图

不建议使用vite创建项目，vite打包方法与webpack存在差异，无法配置publicPath，如果micro自身的路径补全失效，开发环境下本地资源获取十分麻烦

2、主应用配置

2.1、首先在主应用安装micro-app

cd main-app
npm i @micro-zoe/micro-app --save

2.2、在main-app的index.js下初始化micro-app

// main-app index.js
import microApp from '@micro-zoe/micro-app'
microApp.start()

微信截图_20231222175834.png

2.3、新建页面承载子应用

// url为子应用的启动地址

// react引入方式
<micro-app name="my-app1" url="http://localhost:3001/"> </micro-app>
// vite引入方法 需要添加iframe标签
<micro-app name="my-app2" url="http://localhost:3001/" iframe> </micro-app

微信截图_20231222175952.png

2.4、搭建简易路由实现主应用跳转子应用

// main-app目录下安装react-router-dom
npm i react-router-dom

// 在APP.JS引入react-router-dom并使用
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Page1 from './Page1'
import Page2 from './Page2'
import Page3 from './Page3'
import Page4 from './Page4'
function App() {
  return (
// 使用history路由
    <BrowserRouter>
      <Routes>
          <Route path='/' element={<Page1 />}></Route>
          <Route path='/page2' element={<Page2 />}></Route>
      </Routes>
    </BrowserRouter>
  );
}
export default App;

路由跳转

import React from 'react'
import { Link } from 'react-router-dom'

const Page1 = () => {

  return (
    <div>
      <ul>
        <li> <h3>基座应用</h3> </li>
        <li>
          <Link to='/page2'>子应用1</Link>
        </li>
      </ul>
    </div>
  )
}
export default Page1

主应用的配置到这里就结束了，接下来配置子应用

3、子应用配置

3.1、修改子应用启动端口号

此端口号为2.3步骤中，主应用配置的端口号

// package.json
  "scripts": {
  + "start": "set PORT=3001 && react-scripts start",
  - "start":  "react-scripts start"
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 },

微信截图_20231222180100.png

3.2、（可选）如果本地引入的静态资源展示错误，需要添加public-path

1、子应用根目录新建文件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__
}
2、子应用入口文件index,js顶部引入该文件
import './public-path'

微信截图_20231222180325.png 配置完以上内容就可以运行微前端了

4、整体运行项目

4.1、首先进入主应用，启动项目

cd ../main-app
npm run start

4.2、主应用启动完毕后，进入子应用，启动项目

cd ../sub-app
npm run start

4.3、打开主应用的启动路径，会展示如下内容未标题-1.gif

点击子应用1就可以跳转到刚刚创建的子应用了。

总结：

按照以上步骤，简易的微前端就算搭建完成了，micro对webpack搭建的项目十分友好，不需要多余的配置就可以快速的搭建微前端应用，并且对子应用侵入较小，如果只是集成项目的话，到这个步骤基本可以达成目的了。

micro微前端入门体验

介绍