Web组件化 - 微前端实践
第一篇介绍了如何将React组件转换为Web Component
第二篇介绍了子应用(Web Component)中的路由可以正常作用与Shell App
第三篇介绍了Sub App与Shell App通过属性或自定义事件交互
前文已经介绍过如何将React组件编译为Web组件(Web Components)，并在html中引用。本文在此基础上实现在Shell App中动态加载Sub App，从而实现微前端。 当然您可能会问为什么不用现有框架，如SingleSPA、Qiankun？
原因有二
1）Web Component是一种新的思路，原理上也可以实现微前端，不是非要使用第三方框架。
2）Qiankun等框架虽然好，但并不了解其实现细节，如果要修改会有麻烦。
TL, DR
以下为实现过程，首先建立两个Sub App，使用express将编译后的bundle文件暴露出来。主要代码如下(两个sub app大致相同)：
app.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route,
Switch,
Link
} from "react-router-dom";
function Home() {
return (
<div>
App Home
</div>
);
}
function About() {
return (
<div>
About Page
</div>
);
}
function Account() {
const myRef = React.useRef(null);
React.useEffect(()=> {
myRef.current.addEventListener('show', e =>
console.log('from account')
);
}, []);
return (
<div ref={myRef}>
My Account
</div>
);
}
type AppProp = {
name: string;
}
function App(prop: AppProp) {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/account">Account - {prop.name}</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/account">
<Account />
</Route>
</Switch>
</div>
</Router>
)
}
class HelloElement extends HTMLElement {
connectedCallback() {
const myName = this.getAttribute('my-name');
ReactDOM.render(
<div>
<App name={myName}></App>
</div>,
this
);
}
}
const tagName = "hello-component";
if (!window.customElements.get(tagName)) {
window.customElements.define(tagName, HelloElement);
}
server.js
const path = require('path');
const express = require('express')
const app = express()
const port = 5001
const fileRoot = path.resolve(__dirname, '../public');
app.use(express.static(path.join(__dirname, '../public')))
app.get('/', (req, res) => {
res.sendFile('index.html', { root: fileRoot });
})
app.get('/bundle', (req, res) => {
res.sendFile('bundle.js', { root: fileRoot });
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
package.json
{
"name": "web-component",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode=development",
"build": "webpack --mode=production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@types/react": "^17.0.31",
"@types/react-dom": "^17.0.10",
"babel-loader": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"react-router": "^5.2.1",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1"
},
"dependencies": {
"express": "^4.17.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"typescript": "^4.4.4"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.tsx',
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
}
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
}
};
两个Sub-app代码差不多，区别只是运行端口不同。 最后运行npm run build 和 node ./src/server.js
此时，我们访问：http://localhost:5001/bundle 就可以看到打包结果。
接下来是Shell App，为了简单起见，我们就用npx create-react-app shell来建立项目。
这里，我们建立一个custom hook来动态加载js
useScript
import { useEffect, useState } from "react";
export function useScript(src) {
// Keep track of script status ("idle", "loading", "ready", "error")
const [status, setStatus] = useState(src ? "loading" : "idle");
useEffect(
() => {
// Allow falsy src value if waiting on other data needed for
// constructing the script URL passed to this hook.
if (!src) {
setStatus("idle");
return;
}
// Fetch existing script element by src
// It may have been added by another intance of this hook
let script = document.querySelector(`script[src="${src}"]`);
if (!script) {
// Create script
script = document.createElement("script");
script.src = src;
script.async = true;
script.setAttribute("data-status", "loading");
// Add script to document body
document.body.appendChild(script);
// Store status in attribute on script
// This can be read by other instances of this hook
const setAttributeFromEvent = (event) => {
script.setAttribute(
"data-status",
event.type === "load" ? "ready" : "error"
);
};
script.addEventListener("load", setAttributeFromEvent);
script.addEventListener("error", setAttributeFromEvent);
} else {
// Grab existing script status from attribute and set to state.
setStatus(script.getAttribute("data-status"));
}
// Script event handler to update status in state
// Note: Even if the script already exists we still need to add
// event handlers to update the state for *this* hook instance.
const setStateFromEvent = (event) => {
setStatus(event.type === "load" ? "ready" : "error");
};
// Add event listeners
script.addEventListener("load", setStateFromEvent);
script.addEventListener("error", setStateFromEvent);
// Remove event listeners on cleanup
return () => {
if (script) {
script.removeEventListener("load", setStateFromEvent);
script.removeEventListener("error", setStateFromEvent);
}
};
},
[src] // Only re-run effect if script src changes
);
return status;
}
修改app.js，加入两个sub-app，请注意其中的web component定义：hello-component和sub-app-02，这两个标签都是在sub-app中定义好的。
import * as React from 'react';
import { useScript } from "./useScript";
function SubApp01() {
const externalScript = "http://localhost:5001/bundle";
const loadingState = useScript(externalScript);
return(
<div>
{loadingState === "loading" && <p>Loading...</p>}
{loadingState === "ready" && <hello-component my-name="Andy" />}
</div>
);
}
function SubApp02() {
const externalScript = "http://localhost:5002/bundle";
const loadingState = useScript(externalScript);
return(
<div>
{loadingState === "loading" && <p>Loading...</p>}
{loadingState === "ready" && <sub-app-02 />}
</div>
);
}
const app01 = 'app01';
const app02 = 'app02';
function App() {
const [app, setApp] = React.useState(app01);
return (
<div className="App">
Shell App
<br />
<input type='button' value='Sub-App 01' onClick={()=> setApp(app01)} />
<input type='button' value='Sub-App 02' onClick={()=> setApp(app02)} />
<hr />
{
app === app01? <SubApp01></SubApp01> : <SubApp02></SubApp02>
}
</div>
);
}
export default App;
最后运行npm run start, 效果如下：
点击Sub-App 02按钮，则切换到SubApp-02
最后，给出代码链接
当然，此Demo虽然可以运行，却并不完美。比如两个sub-app都将react, react-dom, react-router-dom编入bundle文件。 我们将在后续文章再做探讨。
