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 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.
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.
npm install react react-dom single-spa single-spa-react single-spa-vue vue
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
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.
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
}
};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"
]
}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.
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:
Als nächstes müssen Sie Code für jede App erstellen.
Erstellt die folgenden zwei Dateien im Verzeichnis src/react:
touch main.app.js root.component.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,
];import React from "react" const App = () => <h1>Hello from React</h1> export default App
Erstellen Sie die folgenden beiden im src/vue Verzeichnisdateien:
touch vue.app.js main.vue
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,
];<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
<html> <body> <p id="react"></p> <p id="vue"></p> <script src="/dist/single-spa.config.js"></script> </body> </html>
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, 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
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!
