Erstellen Sie ein Mikro-Frontend mit React, Vue und Single SPA

In diesem Artikel erfahren Sie, wie Sie mit React, Vue und Single SPA ein Mikro-Frontend erstellen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Single SPA

Single SPA ist ein Javascript-Framework für Front-End-Microservices.

Es ermöglicht Ihnen die Verwendung mehrerer Frameworks in einer Single-Page-Anwendung, sodass Sie den Code nach Funktion aufteilen und die gemeinsame Ausführung von Angular-, React- und Vue.js-Programmen ermöglichen können.

Sie sind möglicherweise mit der CLI von React und Vue vertraut. Mit diesen Tools können Sie schnell Projekte erstellen und Webpack-Konfigurationen, Abhängigkeiten, Boilerplate-Code usw. vorbereiten.

Wenn Sie an diese Art von Operation gewöhnt sind, wird Ihnen die erste Hälfte dieses Artikels möglicherweise etwas langweilig vorkommen. Denn wir erstellen alles von Grund auf, einschließlich der Installation aller erforderlichen Abhängigkeiten und der Erstellung von Webpack- und Babel-Konfigurationen von Grund auf.

Umgebung und Konfiguration

Erstellen Sie zunächst ein neues Verzeichnis unter dem Terminal und geben Sie es ein:

mkdir single-spa-app

cd single-spa-app

Als nächstes initialisieren Sie die Datei package.json:

npm init -y

Dann installieren Sie alle für Ihr Projekt erforderlichen Abhängigkeiten. Um allen klar zu machen, was installiert wird, habe ich sie hier in einzelne Schritte unterteilt.

Abhängigkeiten installieren

Regelmäßige Abhängigkeiten installieren

npm install react react-dom single-spa single-spa-react single-spa-vue vue

Babel-Abhängigkeiten installieren

npm install @babel/core @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react babel-loader --save-dev

Webpack-Abhängigkeiten installieren

npm install webpack webpack-cli webpack-dev-server clean-webpack-plugin css-loader html-loader style-loader vue-loader vue-template-compiler --save-dev

Nachdem alle Abhängigkeiten installiert sind, erstellen Sie die Verzeichnisstruktur.

Wir legen den Projektcode im Verzeichnis src ab. Fügen Sie für jedes Programm im Verzeichnis Unterordner hinzu. Erstellen Sie weiterhin Verzeichnisse für die Programme react und vue im Verzeichnis src:

mkdir src src/vue src/react

Konfigurieren Sie unten Webpack und Babel.

Umgebungskonfiguration

Konfigurations-Webpack

Erstellen Sie im Stammverzeichnis des Hauptprogramms eine webpack.config.js-Datei und fügen Sie den folgenden Inhalt hinzu:

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  entry: {
    'single-spa.config': './single-spa.config.js',
  },
  output: {
    publicPath: '/dist/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }, {
        test: /\.js$/,
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'babel-loader',
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  node: {
    fs: 'empty'
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    },
    modules: [path.resolve(__dirname, 'node_modules')],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  devtool: 'source-map',
  externals: [],
  devServer: {
    historyApiFallback: true
  }
};

Konfigurationsbabel

Erstellen Sie die Datei .babelrc im Stammverzeichnis und fügen Sie den folgenden Inhalt hinzu:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    ["@babel/preset-react"]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

Single-spa initialisieren

Dieser Schritt dient der Registrierung Ihre Anwendung wird verwendet, um single-spa den Zeitpunkt und die Methode zum Suchen, Laden und Deinstallieren des Programms mitzuteilen.

Setzen Sie in der Datei webpack.config.js den Eintrag auf single-spa.config.js.

Erstellen Sie diese Datei im Stammverzeichnis des Projekts und konfigurieren Sie sie.

single-spa.config.js

import { registerApplication, start } from 'single-spa'

registerApplication(
  'vue', 
  () => import('./src/vue/vue.app.js'),
  () => location.pathname === "/react" ? false : true
);

registerApplication(
  'react',
  () => import('./src/react/main.app.js'),
  () => location.pathname === "/vue"  ? false : true
);

start();

Diese Datei wird verwendet, um jeden Teil zu registrieren, der für die Haupt-Single-Page-Anwendung unter Verwendung verschiedener Frameworks entwickelt wurde. Bei jedem Aufruf von registerApplication wird eine neue Anwendung registriert, die drei Parameter akzeptiert:

1. Der Name der Anwendung
2. Die zu ladende Funktion (der zu ladende Einstiegspunkt). geladen)
3. Funktion zum Aktivieren (Logik, die angibt, ob die App geladen werden soll)

Als nächstes müssen Sie Code für jede App erstellen.

React-Anwendung

Erstellt die folgenden zwei Dateien im Verzeichnis src/react:

touch main.app.js root.component.js

src/react/main.app.js

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Home from './root.component.js';

function domElementGetter() {
  return document.getElementById("react")
}

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Home,
  domElementGetter,
})

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
];

src/react/root.component.js

import React from "react"

const App = () => <h1>Hello from React</h1>

export default App

Vue-Anwendung

Erstellen Sie die folgenden beiden im src/vue Verzeichnisdateien:

touch vue.app.js main.vue

src/vue/vue.app.js

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import Hello from './main.vue'

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue',
    render: r => r(Hello)
  } 
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

src/vue/main.vue

<template>
  <p>
      <h1>Hello from Vue</h1>
  </p>
</template>

Als nächstes in Erstellen eine index.html-Datei im Stammverzeichnis des Programms:

touch index.html

index.html

<html>
  <body>
    <p id="react"></p>
    <p id="vue"></p>
    <script src="/dist/single-spa.config.js"></script>
  </body>
</html>

Package.json mit einem Skript aktualisieren

Im Paket hinzufügen .json Start- und Build-Skripte:

"scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack --config webpack.config.js -p"
}

Führen Sie das Programm aus

Führen Sie das Programm aus, indem Sie start ausführen:

npm start

Jetzt über die folgende URL zugänglich:

# 渲染基于所有框架的程序
http://localhost:8080/

# 只渲染 react
http://localhost:8080/react

# 之渲染 vue
http://localhost:8080/vue

Zusammenfassung

Mit Ausnahme der Konfiguration am Anfang sind andere Arbeiten sehr einfach. Es wäre schön, wenn Single-Spa in Zukunft eine CLI hinzufügen könnte, um die Boilerplate und die anfängliche Projekteinrichtung zu verwalten.

Wenn Sie eine Mikro-Frontend-Architektur benötigen, dann ist Single-Spa derzeit zweifellos die ausgereifteste Methode.

Originaltext: https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op

Autor: Nader Dabit

Verwandte Empfehlungen:

Zusammenfassung der Front-End-Vue-Interviewfragen 2020 (mit Antworten)

Vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonErstellen Sie ein Mikro-Frontend mit React, Vue und Single SPA. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!