別眨眼網

第4章 模組聯邦實現微應用

4-1 基礎構建-React

基礎應用程式碼安裝

// webpack5 npm install webpack webpack-cli html-webpack-plugin css-loader style-loader babel-loader @babel/core @babel/preset-env @babel/preset-react webpack-dev-server  -D npm install react react-dom

基礎程式碼：

// ======insex。html========<！DOCTYPE html>        <！—— 加一行註釋 ——>  

// ======insex。js========import React from “react”import ReactDom from “react-dom”import App from “。/App”ReactDom。render（，document。getElementById（‘root’））// ======App。js===========import React from “react”import User from “。/User”let App = （） => {    return （        

4-2 基礎配置 webpack。config。js

const path = require（‘path’）const HtmlWebpackPlugin = require（‘html-webpack-plugin’）module。exports = {    // entry 入口，output出口，module模組，plugins 外掛 mode工作模式，devServer開發伺服器    // mode 工作模式    mode： ‘development’， // production 、 development、none    // 入口    entry： ‘。/src/index。js’，    // 出口    output： {        filename： ‘。/bundle。js’，        path： path。resolve（__dirname， ‘dist’）   }，    // 模組    module： {        rules： ［           {                test： /\。js$/，                exclude： /node_modules/，                use： ［                   {                        loader： ‘babel-loader’，                        options： {                            presets： ［                                ‘@babel/preset-env’，                                ‘@babel/preset-react’                           ］                       }                   }               ］           }，       ］   }，    // 外掛    plugins： ［        new HtmlWebpackPlugin（{            template： ‘。/src/index。html’       }）   ］，    // 伺服器    devServer： {        contentBase： path。join（__dirname， ‘dist’），        port： 3000，        open： true   }，}

package。json 啟動命令：

“scripts”： {    “test”： “echo \”Error： no test specified\“ && exit 1”，    “build”：“webpack”，    “start”：“webpack serve” }，

4-3 匯出微應用

const path = require（‘path’）const HtmlWebpackPlugin = require（‘html-webpack-plugin’）// 匯入模組聯邦外掛const Mfp = require（‘webpack’）。container。ModuleFederationPlugin；^^^^^^^^Codes^^^^^^^^^^^^^      // 外掛    plugins： ［        new HtmlWebpackPlugin（{            template： ‘。/src/index。html’       }），        // 例項化模組聯邦外掛        new Mfp（{            // 對外提供的打包後的檔名，引入時使用            filename：‘myuser。js’，            // 微應用（模組） 名稱，類似 single-spa的團隊名字            name：‘study’，            exposes：{                // 具體的一個檔案可以當作一個模組應用，                // 每一個應用都有一個名字和具體指定的程式碼檔案                // 名字：具體打包的程式碼檔案               ‘。/xx’：‘。/src/User。js’，               ‘。/goods’：‘。/src/Goods。js’           }       }）   ］，

4-4 匯入應用模組

const Mfp = require（‘webpack’）。container。ModuleFederationPlugin    // 外掛    plugins： ［        new HtmlWebpackPlugin（{            template： ‘。/src/index。html’       }），        new Mfp（{            // // 微應用（模組） 名稱，當前模組自己的名字            name：‘roots’，            // 匯入模組            remotes：{                // 匯入後給模組起個別名：“微應用名稱@地址/匯出的檔名”                one：“study@http：//localhost：3001/myuser。js”           }       }）   ］，

在元件中使用

// const xx = React。lazy（（）=>import（“匯入時模組別名/匯出時具體檔案對應的名字”））const Us = React。lazy（（）=>import（“one/xx”））const Gos = React。lazy（（）=>import（“one/goods”））let App = （） => {    return （        

4-5 模組聯邦實現 Vue3。0 微前端架構

完整程式碼示例：modulefederationvue3： 基於模組聯邦實現的 Vue3。0 微前端架構示例 （gitee。com）

package。json

{  “name”： “@vue3-demo/layout”，  “private”： true，  “version”： “1。0。0”，  “scripts”： {    “start”： “webpack serve”，    “serve”： “serve dist -p 3001”，    “build”： “webpack ——mode production”，    “clean”： “rm -rf dist” }，  “dependencies”： {    “@babel/core”： “^7。13。16”，    “babel-loader”： “^8。2。2”，    “serve”： “^11。3。2”，    “vue”： “^3。0。0-rc。5”，    “vue-router”： “^4。0。0”，    “vuex”： “^4。0。0” }，  “devDependencies”： {    “@vue/compiler-sfc”： “3。0。0”，    “css-loader”： “5。2。4”，    “file-loader”： “6。2。0”，    “html-webpack-plugin”： “5。3。1”，    “mini-css-extract-plugin”： “0。9。0”，    “url-loader”： “4。1。1”，    “vue-loader”： “16。0。0-beta。8”，    “webpack”： “5。35。0”，    “webpack-dev-server”： “3。11。2”，    “webpack-cli”： “4。6。0”，    “sass”： “^1。26。5”，    “sass-loader”： “^8。0。2” }}

4-5-1 在 home 應用中匯出模組

home\webpack。config。js

const { ModuleFederationPlugin } = require（“webpack”）。container；module。exports = （env = {}） => （{^^^^^^^………………^^^^^^^^^^^  plugins： ［    new VueLoaderPlugin（），    // 模組聯邦    new ModuleFederationPlugin（{      name： “home”，      filename： “remoteEntry。js”，      // 匯出      exposes： {        “。/User”： “。/src/components/User”，        // “。/Button”： “。/src/components/Button”，     }，   }）， ］}）；

4-5-2 在layout應用中匯入

layout\webpack。config。js

const { ModuleFederationPlugin } = require（“webpack”）。container；…………module。exports = （env = {}） => （{    plugins： ［   …………    new ModuleFederationPlugin（{      name： “layout”，      filename： “remoteEntry。js”，      // 匯入      remotes： {        importUser： “home@http：//localhost：3002/remoteEntry。js”，     }，      exposes： {}，   }）， ］}）；

layout\src\views\About。vue

寫好基礎程式碼及對應配置後，分別啟動 home 及 layout 兩個應用專案就可以在 layout 應用的 about 中看到 home 應用中的 User 元件的內容了；