技術(shù)選型
UI構(gòu)建語言：React V17.0.2
CSS: Less
展示組件庫：Ant Design
狀態(tài)管理：Mobx + Mobx State Tree(MST)
路由管理：React Router
腳手架：不使用腳手架
Http通訊工具：Axios
打包工具：Webpack 5
組件管理工具：Bit.dev
包管理工具：Yarn
運行環(huán)境：NodeJS V14 +
微前端方案：Webpack模塊聯(lián)邦
組件間通訊方案：Pub Sub模式（事件發(fā)布訂閱）沥阱，以window為exchange交換區(qū)，事件全部發(fā)送window,接收方從window訂閱
項目結(jié)構(gòu)
- demo
- src
- components // 公用組件
- core // 核心代碼
- mobx // mobx狀態(tài)管理
- pages // 業(yè)務(wù)邏輯頁面
- 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模塊路徑別名
配置開發(fā)應(yīng)用服務(wù)器
//正常情況下，我們需要以應(yīng)用服務(wù)器打開我們的網(wǎng)頁，webpack-dev-server提供了一個簡單的web服務(wù)器虫腋，并且能夠?qū)崟r重新加載.
//首先需要安裝webpack-dev-server
yarn add webpack-dev-server --dev
//接下來讓我們的服務(wù)器跑起來湘纵，在package.json配置如下的命令腳本：
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production --config ./webpack.config.js"
},
安裝其他webpack的插件
//自動創(chuàng)建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以上，所以需要這個插件來轉(zhuǎn)換es5
4. @babel/preset-react：也是最新的版本，之前是babel-preset-react澳淑，用來轉(zhuǎn)換react的語法
5. @babel/plugin-transform-runtime 在轉(zhuǎn)換 ES2015 語法為 ECMAScript 5 的語法時比原，babel 會需要一些輔助函數(shù)，例如 _extend杠巡。
babel 默認會將這些輔助函數(shù)內(nèi)聯(lián)到每一個 js 文件里量窘，這樣文件多的時候，項目就會很大氢拥。
所以 babel 提供了 transform-runtime 來將這些輔助函數(shù)“搬”到一個單獨的模塊 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 模塊聯(lián)邦的使用ModuleFederationPlugin
// 導入模塊聯(lián)邦插件
const { ModuleFederationPlugin } = require('webpack').container;
// app1模塊webpack.config.js配置
plugins: [
new ModuleFederationPlugin({
// library: { type: 'var', name: 'colibri_protal' }, 聲明此屬性需CND方式引入
// 對外提供的打包后的文件名（引入時使用）
filename: 'app1.js',
// 當前應(yīng)用模塊名稱
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: {
// 導入后給模塊起個別名：“微應(yīng)用名稱@地址/導出的文件名”
app1: 'app1@http://localhost:8000/app1.js'
// app1: 'app1' library方式導入冬殃，需cnd方式引入（<script src="http://localhost:8000/app1.js"></script>）
},
// 對外提供的打包后的文件名（引入時使用）
filename: 'app2.js',
// 應(yīng)用名稱，當前模塊自己的名字
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
// 除了前面提到的模塊引入和模塊暴露相關(guān)的配置外叁怪，還有個 shared 配置审葬，主要是用來避免項目出現(xiàn)多個公共依賴。
// 例如奕谭，我們當前的項目 app2涣觉，已經(jīng)引入了一個 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 文件需要優(yōu)先加載，如果 bootstrap.jsx 不是一個異步邏輯栖榨，在 import 暴露的組件 的時候昆汹，會依賴 app1 的 app1.js，如果直接在 index.jsx 執(zhí)行婴栽，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')
)
