技术选型
UI构建语言：React V17.0.2
CSS: Less
展示组件库：Ant Design
状态管理：Mobx + Mobx State Tree(MST)
路由管理：React Router
脚手架：不使用脚手架
Http通讯工具：Axios
打包工具：Webpack 5
组件管理工具：Bit.dev
包管理工具：Yarn
运行环境：NodeJS V14 +
微前端方案：Webpack模块联邦
组件间通讯方案：Pub Sub模式（事件发布订阅），以window为exchange交换区，事件全部发送window,接收方从window订阅
项目结构
- demo
- src
- components // 公用组件
- core // 核心代码
- mobx // mobx状态管理
- pages // 业务逻辑页面
- routes // 路由
- service // http请求
- index.jsx // 项目入口文件
- index.html // 项目模版
- package.json
- webpack.config.js
- .babelrc //babel配置文件
初始化yarn
yarn init
添加依赖包
yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]
将依赖项添加到不同依赖项类别中
分别添加到 devDependencies、peerDependencies 和 optionalDependencies 类别中：
yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional
升级依赖包
yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]
移除依赖包
yarn remove [package]
安装项目的全部依赖
yarn 或者 yarn install
安装webpack
yarn add webpack webpack-cli --dev
配置webpack.config.js文件
const path = require("path");
function resolve(dir) {
console.log(path.join(__dirname, '..', dir));
return path.join(__dirname, '..', dir);
}
module.exports = {
entry: "./src/index.jsx",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
"@": resolve('src')
}
},
}
// entry 是入口文件
// output 是编译后文件
// __dirname node.js全局变量 代表当前文件所在文件夹的完整路径
// path.resolve 返回一个路径 __dirname+'/dist'
// resolve解析模块路径 extensions指定要解析的文件扩展名(引入文件不需要加后缀) alias模块路径别名
配置开发应用服务器
//正常情况下，我们需要以应用服务器打开我们的网页，webpack-dev-server提供了一个简单的web服务器，并且能够实时重新加载.
//首先需要安装webpack-dev-server
yarn add webpack-dev-server --dev
//接下来让我们的服务器跑起来，在package.json配置如下的命令脚本：
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production --config ./webpack.config.js"
},
安装其他webpack的插件
//自动创建html文件 html-webpack-plugin
yarn add html-webpack-plugin --dev
//清除无用文件 clean-webpack-plugin(在每次编译之前把上一次打包的文件清除)
yarn add clean-webpack-plugin --dev
//一堆样式编译loader插件
//less-loader 用来编译less文件
//style-loader和css-loader 是用来编译css文件
完善webpack.config.js
const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
function resolve(dir) {
console.log(path.join(__dirname, '..', dir));
return path.join(__dirname, '..', dir);
}
module.exports = {
entry: "./src/index.jsx",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
"@": resolve('src')
}
},
module: {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
{
test: /\.html$/,
use: ['html-loader'],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
}
],
},
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
template: 'index.html',
inject: true, // 所有js脚本放于body之后
minify: {
removeComments: true, // 删除注释
collapseWhitespace: true, // 折叠空白
removeAttributeQuotes: true // 去除属性引用
}
})
],
devServer: {
hot: true,
port: 8000,
proxy: {
'/api': {
target: 'http://xxxxxx:81/',
changeOrigin: true,
pathRewrite: { '^/api': '/api' }
},
}
},
}
babel插件
1. babel-loader：文件处理器，加载js文件
2. @babel/core：最新的版本，之前是babel-core，是babel的核心功能
3. @babel/preset-env：也是最新的版本，之前是babel-preset-env。因为webpack不能识别es6以上，所以需要这个插件来转换es5
4. @babel/preset-react：也是最新的版本，之前是babel-preset-react，用来转换react的语法
5. @babel/plugin-transform-runtime 在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 _extend。
babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。
所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小。
添加babel配置文件
在根目录下添加文件 .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}
//如果你使用 Babel 和 React 17，你可能需要在配置中添加 "runtime": "automatic",否则会报Uncaught ReferenceError: React is not defined
{"presets": ["@babel/preset-env",["@babel/preset-react", {"runtime":"automatic"}]]}
webpack5 模块联邦的使用ModuleFederationPlugin
// 导入模块联邦插件
const { ModuleFederationPlugin } = require('webpack').container;
// app1模块webpack.config.js配置
plugins: [
new ModuleFederationPlugin({
// library: { type: 'var', name: 'colibri_protal' }, 声明此属性需CND方式引入
// 对外提供的打包后的文件名（引入时使用）
filename: 'app1.js',
// 当前应用模块名称
name: 'app1',
// 暴露模块
exposes: {
'./Counter': './src/components/Counter',
},
// shared: ["react", "react-dom", "react-router-dom"]
})
],
// app2模块webpack.config.js配置
plugins: [
new ModuleFederationPlugin({
// library: { type: 'var', name: 'colibri_order' },
// 导入模块
remotes: {
// 导入后给模块起个别名：“微应用名称@地址/导出的文件名”
app1: 'app1@http://localhost:8000/app1.js'
// app1: 'app1' library方式导入，需cnd方式引入（<script src="http://localhost:8000/app1.js"></script>）
},
// 对外提供的打包后的文件名（引入时使用）
filename: 'app2.js',
// 应用名称，当前模块自己的名字
name: 'app2',
// shared: ["react", "react-dom", "react-router-dom"],
})
],
// app2模块引入app1模块暴露模块
import React, { useState, useEffect } from 'react';
import AboutRequest from "../service/AboutRequest";
import appStore from '../mobx/appStore';
import Counter from 'app1/Counter'; // 引入app1模块暴露模块
export default function About() {
const [counter, setCounter] = useState(0);
const [count, setCount] = useState(0);
const getRes = async () => {
try {
let res = await AboutRequest.openPaymentService('18435201562');
console.log(res);
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getRes()
}, [])
return (
<main style={{ padding: '1rem 0' }} onClick={() => {
appStore.addCount();
setCounter(appStore.counter)
}}>
<h2>Expenses</h2>
{counter}
<Counter
count={count}
onIncrement={() => setCount(count + 1)}
onDecrement={() => setCount(count - 1)}
/>
</main>
);
}
// 配置：shared
// 除了前面提到的模块引入和模块暴露相关的配置外，还有个 shared 配置，主要是用来避免项目出现多个公共依赖。
// 例如，我们当前的项目 app2，已经引入了一个 react/react-dom，而项目 app1 暴露的Counter组件也依赖了 react/react-dom。如果不解决这个问题，项目 app2 就会加载两个 react 库。
// remotes的代码自己不打包，类似external，例如app1/Counter就是加载app1打包的代码
// shared的代码自己是有打包的
// 存在的问题
// 直接引用报错 Uncaught TypeError: Cannot read property 'call' of undefined
// 解决办法
// 增加bootstrap.jsx 通过 index.jsx 异步加载页面
//主要原因是 remote 暴露的 js 文件需要优先加载，如果 bootstrap.jsx 不是一个异步逻辑，在 import 暴露的组件 的时候，会依赖 app1 的 app1.js，如果直接在 index.jsx 执行，app1 的 app1.js 根本没有加载，所以会有问题
// index.jsx
import('./bootstrap');
// bootstrap.jsx
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Routes, Route, HashRouter } from "react-router-dom";
import { Provider } from "mobx-react";
import appStore from "./mobx/appStore";
import routes from "./routes/index";
ReactDOM.render(
<Provider store={appStore}>
<HashRouter>
<Routes>
{routes.map((item, index) => (
<Route key={index} path={item.path} element={item.component} />
))}
<Route
path="*"
element={
<main style={{ padding: '1rem' }}>
<p>There's nothing here!</p>
</main>
}
/>
</Routes>
</HashRouter>
</Provider>,
document.getElementById('colibri-app')
)
