微前端——Single-SPA（二）

single简单用法

1、新建一个html

<html>
<body>
    <div id="root"></div>
    <script src="single-spa-config.js"></script>
</body>
</html>

2、新建一个single-spa-config.js

// single-spa-config.js
import * as singleSpa from 'single-spa';

// 加载react 项目的入口js文件 (模块加载)
const loadingFunction = () => import('./react/app.js');

// 当url前缀为 /react的时候.返回 true (底层路由)
const activityFunction = location => location.pathname.startsWith('/react');

// 注册应用 
singleSpa.registerApplication('react', loadingFunction, activityFunction);

//singleSpa 启动
singleSpa.start();

3、改造React入口文件

import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import RootComponent from './root.component'

if (process.env.NODE_ENV === 'development') {
  // 开发环境直接渲染
  ReactDOM.render(<RootComponent />, document.getElementById('root'))
}

//创建生命周期实例
const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: RootComponent
  domElementGetter: () => document.getElementById('root')
})

// 项目启动的钩子
export const bootstrap = [
  reactLifecycles.bootstrap,
]
// 项目启动后的钩子
export const mount = [
  reactLifecycles.mount,
]
// 项目卸载的钩子
export const unmount = [
  reactLifecycles.unmount,
]

如此就完成了一个最基础的例子
核心理念其实就是修改了react渲染的方式，采用了singleSpaReact去渲染，而后通过父项目中匹配路径去挂载和卸载子模块

微前端——Single-SPA（二）

single简单用法

推荐阅读更多精彩内容