共计 5633 个字符，预计需要花费 15 分钟才能阅读完成。
前言
微前端 —— 理论篇
微前端 —— portal 项目
上一篇中，我们完成了 portal 项目的搭建，算是完成了整个微前端架构的一半工程了。现在开始新建我们的业务小应用。
Menu 项目
menu 项目是作为页面的菜单显示的，主要用于路由的控制。
项目的结构如下：
接下来就开始实现它吧。
- 新建项目文件夹 menu，在根目录执行
npm init -y - 安装相关依赖，由于 react 相关的几个依赖已经在
portal项目中抽离出来，因此我们这不需要安装了。
package.js文件内容如下：
{
"name": "menu",
"version": "1.0.0",
"description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1","start":"webpack-dev-server --config ./webpack.dev.js --port 8235","build":"webpack --config ./webpack.config.js -p"},"keywords": [],"author":"",
"license": "ISC",
"dependencies": {
"antd": "^3.20.7",
"babel-plugin-import": "^1.12.0",
"copy-webpack-plugin": "^5.0.4",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"single-spa-react": "2.8.1",
"@reach/router": "1.2.1"
},
"devDependencies": {
"@babel/core": "7.0.0",
"@babel/plugin-proposal-class-properties": "7.0.0",
"@babel/plugin-proposal-decorators": "7.1.0",
"@babel/plugin-proposal-object-rest-spread": "7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "7.0.0",
"@babel/preset-react": "7.0.0",
"autoprefixer": "9.1.5",
"babel-core": "6.26.3",
"babel-loader": "8.0.0",
"clean-webpack-plugin": "0.1.19",
"css-loader": "1.0.0",
"postcss-loader": "3.0.0",
"style-loader": "0.23.0",
"webpack": "4.17.1",
"webpack-cli": "3.1.0",
"webpack-dev-server": "^3.1.14"
}
}
新建 src 文件夹，在 src 文件夹下创建 components 文件夹，在 components 文件夹中新建文件Menu.js, 内容如下：
import React from 'react'
import {Menu, Icon} from 'antd'
import {Link} from '@reach/router'
const MenuItem = Menu.Item
export default class Menu_ extends React.Component {render () {
return (<div style={menuStyle}>
<h1>menu!</h1>
<Menu>
<MenuItem key="1">
<Icon type="pie-chart"/>
<Link to='/' style={{display: 'inline'}}> 主页 </Link>
</MenuItem>
<MenuItem key="2">
<Icon type="desktop"/>
<Link to='/page1' style={{display: 'inline'}}> 页面 1 </Link>
</MenuItem>
<MenuItem key="32">
<Icon type="desktop"/>
<Link to='/page2' style={{display: 'inline'}}> 页面 2 </Link>
</MenuItem>
<MenuItem key="4">
<Icon type="desktop"/>
<Link to='/page3' style={{display: 'inline'}}> 页面 3 </Link>
</MenuItem>
<MenuItem key="5">
<Icon type="desktop"/>
<Link to='/page4' style={{display: 'inline'}}> 页面 4 </Link>
</MenuItem>
</Menu>
</div>
)
}
}
const menuStyle = {
display: 'inline-block',
position: 'fixed',
width: '300px',
height: '100%'
}
现在我们已经实现了菜单的页面代码。在 src 目录下新建文件root.component.js，引入导出 Menu 组件
import React from 'react'
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom'
import Menu from './components/Menu'
export default class Root extends React.Component {
state = {hasError: false}
componentDidCatch (error, info) {this.setState({hasError: true})
}
render () {
return (<Menu />)
}
} 在 src 目录下新建文件set-public-path.js
// For lazy loading within an application to work you need to set webpack's public path
// basically webpack's internal module system always looks for code-splits (modules) at the root
export default function setPublicPath() {return Promise.all([getUrl()]).then(values => {const [url] = values
const webpackPublicPath = url.slice(0, url.lastIndexOf('/') + 1)
__webpack_public_path__ = webpackPublicPath
return true
})
}
function getUrl () {return window.System.resolve('@portal/menu')
} 在 src 目录下新建文件menu.js，用于组件的注册
import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import {property} from 'lodash'
import setPublicPath from './set-public-path.js'
const reactLifecycles = singleSpaReact({
React,
ReactDOM,
loadRootComponent: () => import(/* webpackChunkName: "people-app" */'./root.component.js').then(property('default')),
domElementGetter,
})
export const bootstrap = [() => {return setPublicPath()
},
reactLifecycles.bootstrap,
]
export const mount = [reactLifecycles.mount,]
export const unmount = [reactLifecycles.unmount,]
export const unload = [reactLifecycles.unload,]
function domElementGetter() {let el = document.getElementById("menu");
if (!el) {el = document.createElement('div');
el.id = 'menu';
document.body.appendChild(el);
}
return el;
} 最后编写 webpack 配置文件，在项目根目录下创建文件webpack.config.js、webpack.dev.js
webpack.config.js
/* eslint-env node */
const webpack = require('webpack')
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {entry: path.resolve(__dirname, 'src/menu.js'),
output: {
filename: 'menu.js',
library: 'menu',
libraryTarget: 'amd',
path: path.resolve(__dirname, 'build/menu'),
},
mode: 'production',
module: {
rules: [{parser: {System: false}},
{
test: /\.js?$/,
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'babel-loader',
},
{
test: /\.css$/,
exclude: [path.resolve(__dirname, 'node_modules')],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]',
},
},
{
loader: 'postcss-loader',
options: {plugins() {
return [require('autoprefixer')
];
},
},
},
],
},
{
test: /\.css$/,
include: [path.resolve(__dirname, 'node_modules')],
exclude: [/\.krem.css$/],
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
modules: [
__dirname,
'node_modules',
],
},
plugins: [new CleanWebpackPlugin(['build/menu']),
new CopyWebpackPlugin([{from: path.resolve(__dirname, 'src/Menu.js')}
]),
],
devtool: 'source-map',
externals: [
/^@portal\/*/,
/^lodash$/,
/^single-spa$/,
/^rxjs\/?.*$/,
/^react$/,
/^react\/lib.*/,
/^react-dom$/,
/.*react-dom.*/,
],
}; 公共依赖就别单独打包了
webpack.dev.js
/* eslint-env node */
const config = require('./webpack.config.js');
const webpack = require('webpack');
config.plugins.push(new webpack.NamedModulesPlugin());
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.devServer = {
headers: {"Access-Control-Allow-Origin": "*",},
}
config.mode = 'development'
module.exports = config;
menu 项目的源码大概就这些
3.project1
project1 项目也是通过 react 框架实现的，主要是实现了不同路由匹配不同页面，最后运行打包的时候，暴露出一个 js 文件，共 portal 项目调用。详细的就不阐述了，跟 menu 项目大同小异，也就只是页面代码不一样。
menu 源码地址
project1 源码地址
项目源码地址
微前端 —— 理论篇
微前端 —— portal 项目
微前端 —— project2 项目（VUE）
正文完
发表至： javascript
2019-08-02
