微前端乾坤js react实践

微前端乾坤js实践

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。解耦团队之间的龚和渡,解耦技术栈的龚和渡,节省团队间沟通成本,解决技术栈之间无法业务打通的能力

微前端架构具备以下几个核心价值:

微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

1. 技术栈无关
* 主框架不限制接入应用的技术栈,微应用具备完全自主权
2. 独立开发、独立部署
* 微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
3. 增量升级
  • 在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
4. 独立运行时
  • 每个微应用之间状态隔离,运行时状态不共享

qiankunjs 特性

  • 基于 single-spa 封装,提供了更加开箱即用的 API。

  • 技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。

  • HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单。

  • ​ 样式隔离,确保微应用之间样式互相不干扰。

  • JS 沙箱,确保微应用之间 全局变量/事件 不冲突。

  • ⚡️ 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。

  • umi 插件,提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

React 接入乾坤微前端实践

Lerna

Lerna 是一个管理工具,用于管理包含多个软件包(package)的 JavaScript 项目

首先使用 npmLerna 安装到全局环境中
npm i lerna -g
创建一个新的 git 代码仓库
git init lerna-qiankun && cd lerna-qiankun
将上述仓库转变为一个 Lerna 仓库

lerna init

目录结构如下

lerna-qiankun/
packages/
package.json
lerna.json

进入 packages 文件目录创建项目 main-qiankun, one-qiankun, tow-qiankun, three-qiankun
创建react 项目 create-react-app main-qiankun --template typescript 微前端主应用
  1. 进入项目 cd main-qiankun

  2. 释放配置文件打开 one-qiankun webpack配置,执行命令: npm eject, 释放后根目录会生成 config 文件夹和 script 文件夹

  3. 安装react路由 npm install react-router-dom

  4. 创建三个路由页面 /, /one, /*, 代码如下:


import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './App.css';
import Home from './pages/home'
import One from './pages/one';
import ErrorPage from './pages/404';


function App() {
  return (
    <div className="App">
      乾坤主应用
      <BrowserRouter basename=''>
        <Routes >
          <Route path="/" element={<Home></Home>} ></Route>
          <Route path="/one" element={<One></One>} ></Route>
          <Route path="/*" element={<ErrorPage></ErrorPage>} ></Route>
        </Routes>
      </BrowserRouter> 
      
    </div>
  );
}

export default App;


  1. 执行命令 npm i qiankun -S 安装 qiankun

  2. 在主应用中找到 one.tsx 添加 qiankun 依赖及启动生命周期,代码如下:


import React, { useEffect, useMemo, useState } from 'react'
import { Outlet } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
import { start } from 'qiankun'


const One = () => {
  // 启动微前端调用子应用模块
  useEffect(() => {
    start()
  }, [])
  return (<>
      <div className="app-box" >
       ONE !!!
      </div>
      <div>
        <div id="one">
          <div>此处是子应用渲染区域</div>
        </div>
      </div>
      
    </>
  )
}

export default One;


  1. 配置完成 npm build 那到 build 文件夹部署代码到nginx指向服务器

创建react 项目 create-react-app one-qiankun --template typescript 微前端主应用

  1. 进入项目 cd one-qiankun

  2. 释放配置文件打开 one-qiankun webpack配置,执行命令: npm eject, 释放后根目录会生成 config 文件夹和 script 文件夹, 找到 script 文件夹下面的 start.js 修改端口号 3000 改成 4000

  3. 安装react路由 npm install react-router-dom

  4. 创建三个路由页面 /dcw/, /dcw/one, /dcw/one-one, /*, 前缀 /dcw 代码如下:


import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './App.css'
import Home from './views/home'
import One from './views/one'
import Two from './views/two'
import ErrorPage from './views/404'


function App() {
  return (
    <div className="App">
      乾坤子应用
      <BrowserRouter basename='/dcw'>
        <Routes >
          <Route path="/" element={<Home></Home>} ></Route>
          <Route path="/one" element={<One></One>} ></Route>
          <Route path="/one-one" element={<Two></Two>} ></Route>
          <Route path="/*" element={<ErrorPage></ErrorPage>} ></Route>
        </Routes>
      </BrowserRouter>
      
    </div>
  );
}

export default App;



  1. 配置子应用 one-qiankun 的入口逻辑 index.tsx 代码如下:

import React from 'react'
import ReactDOM from 'react-dom/client'
// import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'

console.log(window, 'window----')

// 此处是子应用独立访问渲染路由到 root div 标签下
if (!(window as any).__POWERED_BY_QIANKUN__) {
  let root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
 
  reportWebVitals();
}


// 此处是微前端主应用调用执行生命周期
export async function bootstrap() {
  console.log('bootstrap-----')
}

// 微前端挂载dome 生命周期
export async function mount(props: any) {
  console.log('one start')
  // ReactDOM.render(, props.container ? props.container.querySelector('#one') : document.getElementById('root'));
  let root = ReactDOM.createRoot(
    document.getElementById('one') as HTMLElement
  );
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  reportWebVitals();
}

export async function unmount(props: any) {
  console.log('unmount-----')
  // ReactDOM.unmountComponentAtNode(
  //   props.container ? props.container.querySelector('#one') : document.getElementById('root'),
  // );
}

export async function update(props: any) {
  console.log('update-----')
  console.log('update props', props)
}



  1. 配置子应用 webpack.config.js
 // 打包出口处添加
 output: {
      library: `${packageName}-[name]`,
      libraryTarget: 'umd',
      

  1. 配置完成 npm build 那到 build 文件夹部署代码到nginx指向服务器

nginx 配置 主应用 与 子应用 代码如下:

server {
        listen       8080;
        server_name  localhost;

        charset utf-8;

        proxy_set_header  Host $host;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /v2/ {
          proxy_set_header Host 'dcw.com';
          proxy_pass http://dcw.com;
          proxy_read_timeout 10m;
        }

        location /boss/ {
          proxy_set_header Host 'dcw.com';
           proxy_pass http://dcw.com;
          proxy_read_timeout 10m;
        }

        location / {
            root   /work/dist/build;
            try_files $uri /index.html;
        }
},

server {
        listen       8081;
        server_name  localhost;
        // 允许跨域
      add_header 'Access-Control-Allow-Origin' *;
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header 'Access-Control-Allow-Methods' *;
      add_header 'Access-Control-Allow-Headers' *;

      location / {
        root   /u/work/dist/oneqiankun/build;
        try_files $uri /index.html;
      }
    }


  1. 访问 localhost:8080 即可在主应用看到 localhost:8081 子应用的界面,如下图:

微前端乾坤js react实践_第1张图片

至此接入成功!!后面还有主子应用数据交互及传递敬请期待

你可能感兴趣的:(前端,javascript,react.js)