微前端 —— portal項(xiàng)目

shiguibiao 發(fā)布于2019-08-26 10:32 / 1552人閱讀

摘要：前言微前端理論篇上一篇介紹了微前端的理念，本片將開(kāi)始介紹項(xiàng)目。先實(shí)現(xiàn)公共依賴的引入吧。在上一步我們沒(méi)有引入的依賴包，是因?yàn)榈囊蕾嚢亲鳛楣惨蕾噷?dǎo)入的。里面全是我的公共依賴文件在下新建文件夾，新建文件，作為我們整個(gè)項(xiàng)目的頁(yè)面文件。

前言

微前端 —— 理論篇
上一篇介紹了微前端的理念，本片將開(kāi)始介紹portal項(xiàng)目。

portal項(xiàng)目介紹

????????portal項(xiàng)目包括兩個(gè)功能：
????????1. 路由分發(fā)與應(yīng)用加載；
????????2. 抽離公共依賴；

目錄結(jié)構(gòu)如下：

具體實(shí)現(xiàn)

新建一個(gè)文件夾，命名隨便，我的是portal
????????執(zhí)行npm init -y初始化package.json
????????現(xiàn)在我們要做什么呢？肯定是先引入依賴包啊
????????webpack打包相關(guān)和babel和簡(jiǎn)單幾個(gè)需要的loader就行了
????????npm i webpack webpack-cli webpack-dev-server style-loader css-loader copy-webpack-plugin clean-webpack-plugin babel-loader babel-core @babel/preset-env @babel/plugin-syntax-dynamic-import @babel/core -D
????????由于我們還需要同時(shí)運(yùn)行公共依賴引入和應(yīng)用加載兩個(gè)服務(wù)，所以再 npm i concurrently -D

在引入所需的依賴之后，開(kāi)始實(shí)現(xiàn)相關(guān)功能。先實(shí)現(xiàn)公共依賴的引入吧。在上一步我們沒(méi)有引入single-spa的依賴包，是因?yàn)閟ingle-spa的依賴包是作為公共依賴導(dǎo)入的。
????????先創(chuàng)建一個(gè)公共依賴的文件夾，這個(gè)文件夾在任何地方都可以，因?yàn)槲覀兪峭ㄟ^(guò)遠(yuǎn)程鏈接引入的，要是你認(rèn)為的single-spa.js文件可以通過(guò)遠(yuǎn)程cdn或者其他鏈接取到，可以跳過(guò)這一步了，下面是我創(chuàng)建的公共依賴庫(kù)文件夾。

????????里面全是我的公共依賴文件

????????
????????在portal下新建src文件夾，新建文件index.html，作為我們整個(gè)項(xiàng)目的頁(yè)面文件。代碼如下

      
          
            
              
              
              
            
            
              // 此處為從遠(yuǎn)程導(dǎo)入各個(gè)項(xiàng)目的js文件
              // （react、vue項(xiàng)目打包和運(yùn)行都會(huì)產(chǎn)生一個(gè)js文件，此文件就是動(dòng)態(tài)渲染頁(yè)面用的）
              // config.js是portal項(xiàng)目產(chǎn)生的，用來(lái)進(jìn)行路由分發(fā)與組件狀態(tài)管理等

????????接下來(lái)實(shí)現(xiàn)common-deps.js，將我們所有的公共依賴文件統(tǒng)一引入，并命名

      window.SystemJS = window.System

      function insertNewImportMap(newMapJSON) {
        const newScript = document.createElement("script")
        newScript.type = "systemjs-importmap"
        newScript.text = JSON.stringify(newMapJSON)
        const allMaps = document.querySelectorAll("script[type="systemjs-importmap"]")
      
        allMaps[allMaps.length - 1].insertAdjacentElement(
          "afterEnd",
          newScript
        )
      }
      
      const devDependencies = {
        imports: {
          react: "http://localhost:8000/react.development.js",
          "react-dom": "http://localhost:8000/react-dom.development.js",
          "react-dom/server": "http://localhost:8000/react-dom-server.browser.development.js",
          "single-spa": "http://localhost:8000/single-spa.min.js",
          lodash: "http://localhost:8000/lodash.js",
          rxjs: "http://localhost:8000/rxjs.umd.js",
        }
      }
      
      const prodDependencies = {
        imports: {
          react: "http://localhost:8000/react.production.min.js",
          "react-dom": "http://localhost:8000/react-dom.production.min.js",
          "react-dom/server": "http://localhost:8000/react-dom-server.browser.production.min.js",
          "single-spa": "http://localhost:8000/single-spa.min.js",
          lodash: "http://localhost:8000/lodash.min.js",
          rxjs: "http://localhost:8000/rxjs.umd.min.js",
        }
      }
      
      const devMode = true // you will need to figure out a way to use a set of production dependencies instead
      if (devMode) {
        insertNewImportMap(devDependencies)
      } else {
        insertNewImportMap(prodDependencies)
      }

????????公共依賴的抽取代碼已經(jīng)實(shí)現(xiàn)了，下面就配置webpack，將這些依賴進(jìn)行打包，在項(xiàng)目根目錄創(chuàng)建 webpack.common-deps.config.js、webpack.common-deps.config.dev.js

????????webpack.common-deps.config.js

  const path = require("path")
  const CleanWebpackPlugin = require("clean-webpack-plugin")
  const CopyWebpackPlugin = require("copy-webpack-plugin");
  
  module.exports = {
    entry: "./src/common-deps.js",
    output: {
      filename: "common-deps.js",
      path: path.resolve(__dirname, "build/common-deps"),
      chunkFilename: "[name].js",
    },
    mode: "production",
    node: {
      fs: "empty",
    },
    resolve: {
      modules: [
        __dirname,
        "node_modules",
      ],
    },
    devtool: "sourcemap",
    plugins: [
      new CleanWebpackPlugin(["build/common-deps/"]),
      CopyWebpackPlugin([
        {from: path.resolve(__dirname, "src/common-deps.js")}
      ]),
    ],
    module: {
      rules: [
        {parser: {System: false}},
        {
          test: /.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: "babel-loader",
          }
        }
      ]
    }
  }

????????webpack.common-deps.config.dev.js

  /* eslint-env node */
  const config = require("./webpack.common-deps.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;

????????上面配置dev-server跨域，很重要?。?！否則會(huì)因?yàn)闊o(wú)法跨域，訪問(wèn)不到j(luò)s文件

????????最后在package.json的scripts中添加命令

  "scripts": {
      "test": "echo "Error: no test specified" && exit 1",
      "start:common-deps": "webpack-dev-server --config ./webpack.common-deps.config.dev.js --port 8234",
      "build:common-deps": "webpack --config ./webpack.common-deps.config.js -p"
    },

????????至此，公共依賴的抽取已經(jīng)完成，執(zhí)行npm run start:common-deps，公共依賴就被打包到了portal項(xiàng)目下的build/common-deps/目錄，通過(guò)import也可以正常導(dǎo)入使用（歸功于system）

公共依賴抽取實(shí)現(xiàn)、配置完畢之后，開(kāi)始利用single-spa構(gòu)建我們的路由分發(fā)系統(tǒng)

????????在src中創(chuàng)建文件activityFns.js，實(shí)現(xiàn)路由的正確匹配，內(nèi)容如下：

  export function prefix(location, ...prefixes) {
      return prefixes.some(
        prefix => (
          location.href.indexOf(`${location.origin}/${prefix}`) !== -1
        )
      )
    }
    // return true 則加載 false則不加載
    // 這里的menu是菜單，按理應(yīng)該一直加載出來(lái)的，因此return true
    export function menu(location) {
      return true
    }
  
    export function project1(location) {
      return prefix(location, "", "page1", "page2")
    }
  
    export function project2(location) {
      return prefix(location, "page3", "page4")
    }

????????在src中創(chuàng)建文件config.js，通過(guò)single-spa實(shí)現(xiàn)路由的注冊(cè)

  import * as isActive from "./activityFns.js"
  import * as singleSpa from "single-spa"
  
  singleSpa.registerApplication("menu", () => SystemJS.import("@portal/menu"), isActive.menu)
  singleSpa.registerApplication("project1", () => SystemJS.import("@portal/project1"), isActive.project1)
  singleSpa.registerApplication("project2", () => SystemJS.import("@portal/project2"), isActive.project2)
  singleSpa.start()

????????配置webpack打包，在項(xiàng)目根目錄創(chuàng)建文件webpack.config.config.js，內(nèi)容如下：

  /* 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: "./src/config.js",
    output: {
      filename: "config.js",
      library: "config",
      libraryTarget: "amd",
      path: path.resolve(__dirname, "build"),
    },
    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"), /.krem.css$/],
          use: [
            "style-loader",
            {
              loader: "css-loader",
              options: {
                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: [
      CopyWebpackPlugin([
        {from: path.resolve(__dirname, "src/index.html")},
        {from: path.resolve(__dirname, "src/styles.css")},
      ]),
      new CleanWebpackPlugin(["build"]),
    ],
    devtool: "source-map",
    externals: [
      /^lodash$/,
      /^single-spa$/,
      /^rxjs/?.*$/,
    ],
  };

????????上面的配置中，最后的externals屬性值配置不需要webpack打包的依賴，因?yàn)檫@些在公共依賴中已經(jīng)打包好了，不需要多帶帶打包

????????在項(xiàng)目根目錄創(chuàng)建文件webpack.config.config.dev.js，內(nèi)容如下：

  const config = require("./webpack.config.config.js")
  const webpack = require("webpack")
  
  config.plugins.push(new webpack.NamedModulesPlugin());
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.devServer = {
    contentBase: "./build",
    historyApiFallback: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    proxy: {
      "/common/": {
        target: "http://localhost:8234",
        pathRewrite: {"^/common" : ""}
      }
    }
  }
  
  config.mode = "development"
  
  module.exports = config;

????????同樣配置跨域
????????在package.json中添加命令，最終內(nèi)容如下

  {
    "name": "portal",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo "Error: no test specified" && exit 1",
      "start": "concurrently "npm run start:config" "npm run start:common-deps"",
      "start:config": "webpack-dev-server --config ./webpack.config.config.dev.js --port 8233",
      "start:common-deps": "webpack-dev-server --config ./webpack.common-deps.config.dev.js --port 8234",
      "build": "npm run build:config && npm run build:common-deps",
      "build:config": "webpack --config ./webpack.config.config.js -p",
      "build:common-deps": "webpack --config ./webpack.common-deps.config.js -p"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@babel/core": "^7.4.3",
      "@babel/plugin-syntax-dynamic-import": "7.0.0",
      "@babel/preset-env": "^7.4.3",
      "babel-core": "6.26.3",
      "babel-loader": "8.0.0",
      "clean-webpack-plugin": "0.1.19",
      "concurrently": "^4.1.1",
      "copy-webpack-plugin": "4.5.2",
      "css-loader": "1.0.0",
      "style-loader": "0.23.0",
      "webpack": "4.17.1",
      "webpack-cli": "3.1.0",
      "webpack-dev-server": "^3.1.14"
    }
  }

????????至此，整個(gè)portal項(xiàng)目就搭建完畢了，下一篇，我們實(shí)現(xiàn)menu項(xiàng)目和project1項(xiàng)目

????????項(xiàng)目源碼
????????Portal源碼

????????微前端 —— 理論篇
????????微前端 —— menu&&project1（React）
????????微前端 —— project2項(xiàng)目（VUE）

GPU云服務(wù)器云服務(wù)器微前端前端項(xiàng)目前端項(xiàng)目視頻前端開(kāi)發(fā)項(xiàng)目

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106341.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

shiguibiao

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Python入門-第一章Python基礎(chǔ)

閱讀 1575·2021-11-24 09:39
H3C生成樹(shù)配置

閱讀 1064·2021-11-22 15:11
Android SeekBar 自定義thumb，thumb旋轉(zhuǎn)動(dòng)畫效果

閱讀 2220·2021-11-19 11:35
CloudServer：$4/月KVM-2GB/50GB/5TB/三個(gè)數(shù)據(jù)中心

閱讀 1643·2021-09-13 10:37
香港bgp線路和cn2線路：香港bgp服務(wù)器cn2服務(wù)器選哪一個(gè)?

閱讀 2482·2021-09-03 10:47
Vultr機(jī)房測(cè)評(píng) - Vultr美國(guó)芝加哥Chicago機(jī)房綜合速度和線路去程回程測(cè)

閱讀 2166·2021-08-30 09:47
酷銳云：周年慶全場(chǎng)8折優(yōu)惠，洛杉磯Cera特供VPS月付10元，限量50臺(tái)

閱讀 1644·2021-08-20 09:39
記錄一次杭州順網(wǎng)科技的面試過(guò)程

閱讀 2924·2019-08-30 14:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微前端 —— portal項(xiàng)目

相關(guān)文章

微前端 —— 理論篇

微前端 —— project2項(xiàng)目（VUE）

微前端改造初探

微前端 —— menu&&project1（React）

ELSE 技術(shù)周刊(2017.10.16期)

發(fā)表評(píng)論

0條評(píng)論

shiguibiao

男|高級(jí)講師

TA的文章

Python入門-第一章Python基礎(chǔ)

H3C生成樹(shù)配置

Android SeekBar 自定義thumb，thumb旋轉(zhuǎn)動(dòng)畫效果

CloudServer：$4/月KVM-2GB/50GB/5TB/三個(gè)數(shù)據(jù)中心

香港bgp線路和cn2線路：香港bgp服務(wù)器cn2服務(wù)器選哪一個(gè)?

Vultr機(jī)房測(cè)評(píng) - Vultr美國(guó)芝加哥Chicago機(jī)房綜合速度和線路去程回程測(cè)

酷銳云：周年慶全場(chǎng)8折優(yōu)惠，洛杉磯Cera特供VPS月付10元，限量50臺(tái)

記錄一次杭州順網(wǎng)科技的面試過(guò)程

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微前端 —— portal項(xiàng)目

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！